diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..6be8c86 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,64 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "env": { + "es6": true, + "browser": true + }, + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint", + "eslint-plugin-tsdoc" + ], + "rules": { + "no-console": 2, + "curly": 2, + "dot-notation": 1, + "eqeqeq": 2, + "no-alert": 2, + "no-caller": 2, + "no-eval": 2, + "no-extra-bind": 2, + "no-implied-eval": 2, + "no-multi-spaces": 2, + "no-with": 2, + "no-shadow": 2, + "no-shadow-restricted-names": 2, + "brace-style": ["error", "1tbs"], + "camelcase": 2, + "comma-style": ["error", "last"], + "eol-last": 2, + "key-spacing": 2, + "new-cap": 1, + "no-array-constructor": 2, + "no-mixed-spaces-and-tabs": 2, + "no-multiple-empty-lines": 2, + "semi-spacing": 2, + "no-spaced-func": 2, + "no-trailing-spaces": 2, + "space-before-blocks": 2, + "spaced-comment": 1, + "no-var": 2, + "tsdoc/syntax": "warn" + }, + "overrides": [ + { + "files": ["test/**/*.js"], + "plugins": [ + "jest", + "jest-dom" + ], + "extends": ["plugin:jest-dom/recommended"], + "env": { + "jest/globals": true, + "node": true + }, + "rules": { + "no-console": 0, + "no-shadow": 0 + } + } + ] +} diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 6ac6519..aac2a4b 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -7,20 +7,22 @@ jobs: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [14, 16, 18] - steps: - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: - node-version: ${{ matrix.node-version }} - - name: npm install, build, and test - run: | - npm install - npm run build --if-present - npm test - env: - CI: true + node-version: 18 + + - name: yarn install + run: yarn install + + - name: build + run: yarn build + + - name: test + run: yarn test + + - name: lint + run: yarn lint diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c79ed74 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "singleQuote": true, + "jsxSingleQuote": true, + "semi": true, + "tabWidth": 2, + "bracketSpacing": true, + "arrowParens": "avoid", + "trailingComma": "none" +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..eff2560 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard-scss" +} diff --git a/CHANGELOG.md b/CHANGELOG.md index f47e10b..f0e97ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +* The plugin is now compatible with and requires Chartist v1 API +* The plugin provides an ESM, CSJ and UMD version +* The "class" option accepts a single class name or an array of class names +* Sources were converted to TypeScript +* Replace deprecated properties "page{X,Y}Offset" with scroll{X,Y} +* Dropped support for "currency" and "currencyFormatCallback" options (use "tooltipFnc" instead) + ## [1.0.0] - 2nd January 2023 Versions 1.0.0 and above of this plugin only work with Chartist versions of 1.0.0 and above. diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 69c0aaf..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Grunt Configurations - * ==================== - * - * Seperate tasks and configurations are declared in '/tasks'. - * - * Link: https://github.com/firstandthird/load-grunt-config - */ - -'use strict'; - -module.exports = function (grunt) { - - // tracks how long a tasks take - require('time-grunt')(grunt); - - // load task and configurations - require('load-grunt-config')(grunt, { - configPath: __dirname + '/tasks', - data: { - pkg: grunt.file.readJSON('package.json'), - year: new Date().getFullYear() - } - }); -}; diff --git a/LICENSE b/LICENSE index 1b6cb7c..b2c48c8 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,7 @@ The MIT License (MIT) -Copyright (c) 2015 Markus Padourek +Copyright (c) 2018 LukBukkit +Copyright (c) 2015-2018 Markus Padourek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -19,4 +20,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - diff --git a/README.md b/README.md index 1f15e4c..88d1d97 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,50 @@ # Tooltips for Chartist -[](https://travis-ci.com/LukBukkit/chartist-plugin-tooltip) -[](https://www.npmjs.com/package/chartist-plugin-tooltips-updated) +[](https://github.com/LukBukkit/chartist-plugin-tooltip/actions/workflows/nodejs.yml)[](https://www.npmjs.com/package/chartist-plugin-tooltips-updated) This plugin provides quick and easy tooltips for your [Chartist](https://github.com/chartist-js/chartist#readme) charts. It's published on npm as [chartist-plugin-tooltips-updated](https://www.npmjs.com/package/chartist-plugin-tooltips-updated). -## Configuration Options +## Available options and their defaults -The following options can be configured when the plugin is loaded. -Their default values are as shown. +* **tooltipOffset**: `{ x: number, y: number }` -```javascript -var defaultOptions = { - currency: undefined, // Accepts '£', '$', '€', etc. - // Append curreny information e.g. 4000 => €4,000 + Tooltip offset in px. Default: `{ x: 0, y: -20 }` - tooltipFnc: undefined, // Accepts function - // Build custom tooltip +* **anchorToPoint**: `boolean` - transformTooltipTextFnc: undefined, // Accepts function - // Transform tooltip text + If set true, the tooltips will not follow mouse movement and be anchored to the target point or bar. + Default: `false` - class: undefined, // Accecpts 'class1', 'class1 class2', etc. - // Adds class(es) to the tooltip wrapper +* **appendToBody**: `boolean` - anchorToPoint: false, // Accepts true or false - // Tooltips do not follow mouse movement -- they are anchored to the point / bar. + Append tooltip container to body. + If not, the tooltip element will be added to the chart container. + Default: `true` - appendToBody: true, // Accepts true or false - // Appends tooltips to body instead of chart container, +* **class**: `string | string[]` - metaIsHTML: false // Accepts true or false - // Whether to parse the meta value as HTML or plain text -}; -``` + Add custom class(es) to the tooltip. + Can be a single class `"my-class"` or a list `["class-1", "class-2"]`. + +* **pointClass**: `string` + + Custom point class to append tooltips to. + If none is specified, the default class will be used depending on the chart type (e.g. "ct-point" for line charts). + +* **tooltipFnc**: `(meta: string, value: string) => string` + + Custom function to generate tooltip (entire HTML markup). + +* **transformTooltipTextFnc**: `(value: string) => string` -## Sample Usage + Custom function to generate tooltip text (content only). + +* **metaIsHTML**: `boolean` + + Should the meta content be parsed as HTML (`true`) or plain text (`false`, default). + + +## Sample usage in Chartist.js ### 1. Install the plugin @@ -47,50 +56,51 @@ Include the JavaScript script file of the plugin either using one of two options 1. Include it using a ` - - - + + + - + +
+ + +