Repository: chartist-js/chartist Branch: main Commit: f4eaee26871b Files: 281 Total size: 467.6 KB Directory structure: gitextract_93mw5ltc/ ├── .browserslistrc ├── .clean-publish ├── .commitlintrc.json ├── .czrc ├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug-report.yml │ │ ├── config.yml │ │ └── feature-request.yml │ ├── renovate.json │ └── workflows/ │ ├── checks.yml │ ├── ci.yml │ ├── commit.yml │ ├── release.yml │ ├── update-storyshots.yml │ └── website.yml ├── .gitignore ├── .nano-staged.json ├── .npmrc ├── .nvmrc ├── .prettierrc ├── .simple-git-hooks.json ├── .simple-release.json ├── .size-limit.json ├── .storybook/ │ ├── main.js │ ├── manager.js │ ├── package.json │ ├── preview.js │ └── theme.js ├── .tool-versions ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE-MIT ├── LICENSE-WTFPL ├── README.md ├── jest.config.json ├── package.json ├── pnpm-workspace.yaml ├── postcss.config.cjs ├── rollup.config.js ├── sandboxes/ │ ├── bar/ │ │ ├── bi-polar-interpolated/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── distributed-series/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── extreme-responsive/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── horizontal/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── label-position/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── multiline/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── overlapping-bars/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── stacked/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── stacked-accumulate-relative/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ └── with-circle-modify-drawing/ │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ └── sandbox.config.json │ ├── line/ │ │ ├── area/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── axis-auto/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── axis-fixed-and-auto/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── bipolar-area/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── data-fill-holes/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── data-holes/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── modify-drawing/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── only-integer/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── path-animation/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── scatter-random/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── series-override/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── simple/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── simple-responsive/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── simple-smoothing/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── simple-svg-animation/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── svg-animation/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ └── timeseries/ │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ └── sandbox.config.json │ ├── pie/ │ │ ├── custom-labels/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── donut-animation/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── donut-chart/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ ├── simple/ │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ └── sandbox.config.json │ │ └── simple-gauge/ │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ └── sandbox.config.json │ └── tsconfig.json ├── scripts/ │ └── styles.cjs ├── src/ │ ├── axes/ │ │ ├── AutoScaleAxis.ts │ │ ├── Axis.spec.ts │ │ ├── Axis.ts │ │ ├── FixedScaleAxis.spec.ts │ │ ├── FixedScaleAxis.ts │ │ ├── StepAxis.spec.ts │ │ ├── StepAxis.ts │ │ ├── index.ts │ │ └── types.ts │ ├── charts/ │ │ ├── BarChart/ │ │ │ ├── BarChart.spec.ts │ │ │ ├── BarChart.stories.ts │ │ │ ├── BarChart.ts │ │ │ ├── BarChart.types.ts │ │ │ └── index.ts │ │ ├── BaseChart.ts │ │ ├── LineChart/ │ │ │ ├── LineChart.spec.ts │ │ │ ├── LineChart.stories.ts │ │ │ ├── LineChart.ts │ │ │ ├── LineChart.types.ts │ │ │ └── index.ts │ │ ├── PieChart/ │ │ │ ├── PieChart.spec.ts │ │ │ ├── PieChart.stories.ts │ │ │ ├── PieChart.ts │ │ │ ├── PieChart.types.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ └── types.ts │ ├── core/ │ │ ├── constants.ts │ │ ├── creation.spec.ts │ │ ├── creation.ts │ │ ├── data/ │ │ │ ├── bound.spec.ts │ │ │ ├── bounds.ts │ │ │ ├── data.ts │ │ │ ├── highLow.ts │ │ │ ├── index.ts │ │ │ ├── normalize.spec.ts │ │ │ ├── normalize.ts │ │ │ ├── segments.spec.ts │ │ │ ├── segments.ts │ │ │ ├── serialize.spec.ts │ │ │ └── serialize.ts │ │ ├── index.ts │ │ ├── lang.spec.ts │ │ ├── lang.ts │ │ ├── math.ts │ │ ├── optionsProvider.ts │ │ └── types.ts │ ├── event/ │ │ ├── EventEmitter.ts │ │ └── index.ts │ ├── index.ts │ ├── interpolation/ │ │ ├── cardinal.ts │ │ ├── index.ts │ │ ├── monotoneCubic.ts │ │ ├── none.ts │ │ ├── simple.ts │ │ └── step.ts │ ├── styles/ │ │ ├── _settings.scss │ │ └── index.scss │ ├── svg/ │ │ ├── Svg.spec.ts │ │ ├── Svg.ts │ │ ├── SvgList.ts │ │ ├── SvgPath.spec.ts │ │ ├── SvgPath.ts │ │ ├── animation.ts │ │ ├── index.ts │ │ └── types.ts │ └── utils/ │ ├── extend.ts │ ├── functional.ts │ ├── index.ts │ ├── types.ts │ └── utils.ts ├── test/ │ ├── mock/ │ │ ├── cssModule.js │ │ └── dom.ts │ ├── setup.js │ ├── storyshots.spec.js │ └── utils/ │ ├── skipable.js │ └── storyshots/ │ ├── imageSnapshotWithStoryParameters.js │ ├── index.js │ ├── initStoryshots.js │ ├── storybook.js │ └── viewport.ts ├── tsconfig.build.json ├── tsconfig.json └── website/ ├── .gitignore ├── CNAME ├── README.md ├── babel.config.js ├── docs/ │ ├── api/ │ │ ├── .gitignore │ │ ├── basics.md │ │ └── docs.js │ ├── docs.js │ ├── examples/ │ │ ├── bar-chart.mdx │ │ ├── docs.js │ │ ├── index.mdx │ │ ├── line-chart.mdx │ │ └── pie-chart.mdx │ ├── index.mdx │ ├── plugins.md │ ├── what-is-it-made-for.md │ └── whats-new-in-v1.md ├── docusaurus.config.js ├── package.json ├── sidebars.js ├── src/ │ ├── components/ │ │ └── ContextProvider.tsx │ ├── css/ │ │ ├── custom.css │ │ └── recoloring.css │ └── prism-theme.js ├── static/ │ └── .nojekyll └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .browserslistrc ================================================ defaults not ie 11 not ie_mob 11 ================================================ FILE: .clean-publish ================================================ { "withoutPublish": true, "tempDir": "package" } ================================================ FILE: .commitlintrc.json ================================================ { "extends": ["@commitlint/config-conventional"], "rules": { "body-max-line-length": [0] } } ================================================ FILE: .czrc ================================================ { "path": "@commitlint/cz-commitlint" } ================================================ FILE: .editorconfig ================================================ # EditorConfig helps developers define and maintain consistent # coding styles between different editors and IDEs # editorconfig.org root = true [*] # Change these settings to your own preference indent_style = space indent_size = 2 # We recommend you to keep these unchanged end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ================================================ FILE: .eslintrc.json ================================================ { "extends": ["eslint:recommended", "plugin:prettier/recommended"], "parser": "@babel/eslint-parser", "parserOptions": { "ecmaVersion": "latest", "requireConfigFile": false }, "env": { "es6": true, "browser": true, "node": true }, "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 }, "overrides": [ { "files": ["**/*.ts"], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": ["plugin:@typescript-eslint/recommended"] }, { "files": ["test/**/*.{js,ts}", "*.spec.{js,ts}", "*.stories.{js,ts}"], "plugins": [ "jest", "testing-library", "jest-dom" ], "extends": ["plugin:jest-dom/recommended"], "env": { "jest/globals": true }, "rules": { "no-console": 0, "no-shadow": 0, "@typescript-eslint/no-explicit-any": 0 } } ] } ================================================ FILE: .gitattributes ================================================ * text=auto ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: gionkunz ================================================ FILE: .github/ISSUE_TEMPLATE/bug-report.yml ================================================ name: "🐛 Bug Report" description: "If something isn't working as expected." title: "[Bug]: " labels: ["bug"] body: - type: markdown attributes: value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible. - type: checkboxes id: input1 attributes: label: Would you like to work on a fix? options: - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process. - type: textarea attributes: label: Current and expected behavior description: A clear and concise description of what the library is doing and what you would expect. validations: required: true - type: input attributes: label: Reproduction description: | Please provide issue reproduction. You can give a link to a repository with the reproduction or make a [sandbox](https://codesandbox.io/) and reproduce the issue there. validations: required: true - type: input attributes: label: Chartist version description: Which version of Chartist are you using? placeholder: v0.0.0 validations: required: true - type: textarea attributes: label: Possible solution description: If you have suggestions on a fix for the bug. ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: 🤔 Have a Question? url: https://stackoverflow.com/questions/tagged/chartist.js about: Feel free to ask questions on Stack Overflow. ================================================ FILE: .github/ISSUE_TEMPLATE/feature-request.yml ================================================ name: "🚀 Feature Request" description: "I have a specific suggestion!" labels: ["enhancement"] body: - type: markdown attributes: value: Thanks for taking the time to suggest a new feature! Please fill out this form as completely as possible. - type: checkboxes id: input1 attributes: label: Would you like to work on this feature? options: - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process. - type: textarea attributes: label: What problem are you trying to solve? description: | A concise description of what the problem is. placeholder: | I have an issue when [...] validations: required: true - type: textarea attributes: label: Describe the solution you'd like validations: required: true - type: textarea attributes: label: Describe alternatives you've considered - type: textarea attributes: label: Documentation, Adoption, Migration Strategy description: | If you can, explain how users will be able to use this and how it might be documented. Maybe a mock-up? ================================================ FILE: .github/renovate.json ================================================ { "extends": [ "config:base", ":preserveSemverRanges" ] } ================================================ FILE: .github/workflows/checks.yml ================================================ name: Checks on: pull_request: branches: - main jobs: size: runs-on: ubuntu-latest name: size-limit steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Check size uses: andresz1/size-limit-action@master with: github_token: ${{ secrets.GITHUB_TOKEN }} storybook: runs-on: ubuntu-latest name: storybook steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Install dependencies run: pnpm install - name: Check storybook run: pnpm build:storybook editorconfig: runs-on: ubuntu-latest name: editorconfig steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Check editorconfig uses: editorconfig-checker/action-editorconfig-checker@v1 website: runs-on: ubuntu-latest name: website steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Install dependencies run: pnpm install - name: Check website run: pnpm build working-directory: ./website ================================================ FILE: .github/workflows/ci.yml ================================================ name: CI on: pull_request: push: branches: - main jobs: test: runs-on: ubuntu-latest strategy: matrix: stage: - unit - storyshots fail-fast: false name: ${{ matrix.stage }} tests steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Install dependencies run: pnpm install - name: Run tests run: pnpm test:${{ matrix.stage }} - name: Collect coverage uses: codecov/codecov-action@v5 if: "success() && matrix.stage == 'unit'" with: files: ./coverage/lcov.info - name: Collect artifacts uses: actions/upload-artifact@v4 if: "failure() && matrix.stage != 'unit'" with: name: Image snapshots (${{ matrix.stage }}) path: test/__image_snapshots__/ ================================================ FILE: .github/workflows/commit.yml ================================================ name: Commit on: push: jobs: commitlint: runs-on: ubuntu-latest name: commitlint steps: - name: Checkout the repository uses: actions/checkout@v5 with: fetch-depth: 0 - name: Run commitlint uses: wagoid/commitlint-github-action@v4 ================================================ FILE: .github/workflows/release.yml ================================================ name: Release on: issue_comment: types: [created, deleted] push: branches: - main jobs: check: runs-on: ubuntu-latest name: Context check outputs: continue: ${{ steps.check.outputs.continue }} workflow: ${{ steps.check.outputs.workflow }} steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Context check id: check uses: trigensoftware/simple-release-action@latest with: workflow: check github-token: ${{ secrets.GITHUB_TOKEN }} pull-request: runs-on: ubuntu-latest name: Pull request needs: check if: needs.check.outputs.workflow == 'pull-request' steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Create or update pull request uses: trigensoftware/simple-release-action@latest with: workflow: pull-request github-token: ${{ secrets.GITHUB_TOKEN }} release: runs-on: ubuntu-latest name: Release needs: check if: needs.check.outputs.workflow == 'release' steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' registry-url: 'https://registry.npmjs.org' - name: Install dependencies run: pnpm install - name: Release uses: trigensoftware/simple-release-action@latest with: workflow: release github-token: ${{ secrets.GITHUB_TOKEN }} npm-token: ${{ secrets.NPM_TOKEN }} ================================================ FILE: .github/workflows/update-storyshots.yml ================================================ name: Update storyshots on: workflow_dispatch jobs: update-storyshots: runs-on: ubuntu-latest name: storyshots steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Install dependencies run: pnpm install - name: Update snapshots run: pnpm test:storyshots -u - name: Collect artifacts uses: actions/upload-artifact@v4 if: always() with: name: Updated storyshots path: test/__image_snapshots__/ ================================================ FILE: .github/workflows/website.yml ================================================ name: Website on: push: branches: - main # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow one concurrent deployment concurrency: group: "pages" cancel-in-progress: true jobs: deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest name: deploy website steps: - name: Checkout the repository uses: actions/checkout@v5 - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 7 - name: Install Node.js uses: actions/setup-node@v5 with: node-version: 16 cache: 'pnpm' - name: Install dependencies run: pnpm install - name: Build website run: pnpm build working-directory: ./website - name: Setup Pages uses: actions/configure-pages@v5 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: './website/build' - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 ================================================ FILE: .gitignore ================================================ # See https://help.github.com/ignore-files/ for more about ignoring files. # dependencies node_modules # builds package dist storybook-static # misc .DS_Store npm-debug.log* # testing coverage ================================================ FILE: .nano-staged.json ================================================ { "**/*.{js,ts}": ["prettier --write", "eslint"] } ================================================ FILE: .npmrc ================================================ strict-peer-dependencies=false ================================================ FILE: .nvmrc ================================================ lts/* ================================================ FILE: .prettierrc ================================================ { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "tabWidth": 2, "bracketSpacing": true, "arrowParens": "avoid", "trailingComma": "none" } ================================================ FILE: .simple-git-hooks.json ================================================ { "commit-msg": "pnpm commitlint --edit \"$1\"", "pre-commit": "pnpm nano-staged", "pre-push": "pnpm test" } ================================================ FILE: .simple-release.json ================================================ { "project": "@simple-release/pnpm#PnpmProject" } ================================================ FILE: .size-limit.json ================================================ [ { "path": "dist/index.cjs", "limit": "36.76 kB", "webpack": false, "running": false }, { "path": "dist/index.cjs", "limit": "7.45 kB", "import": "{ BarChart }" }, { "path": "dist/index.js", "limit": "36.48 kB", "webpack": false, "running": false }, { "path": "dist/index.js", "limit": "7.4 kB", "import": "{ BarChart }" }, { "path": "dist/index.css", "limit": "1.3 kB", "webpack": false, "running": false } ] ================================================ FILE: .storybook/main.js ================================================ const path = require('path'); module.exports = { stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-docs', '@storybook/addon-controls', '@storybook/addon-actions', '@storybook/addon-viewport' ], webpackFinal: async config => { config.module.rules[0].use = [require.resolve('swc-loader')]; config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'].map( require.resolve ) }); config.resolve.alias['chartist-dev/styles$'] = path.resolve( __dirname, '..', 'src', 'styles', 'index.scss' ); config.resolve.alias['chartist-dev$'] = path.resolve( __dirname, '..', 'src' ); return config; } }; ================================================ FILE: .storybook/manager.js ================================================ import { addons } from '@storybook/addons'; import { theme } from './theme'; addons.setConfig({ theme, panelPosition: 'right' }); ================================================ FILE: .storybook/package.json ================================================ { "type": "commonjs" } ================================================ FILE: .storybook/preview.js ================================================ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import { configureActions } from '@storybook/addon-actions'; import faker from 'faker'; const SEED_VALUE = 584; if (process.env.STORYBOOK_STORYSHOTS) { // Make faker values reproducible. faker.seed(SEED_VALUE); } configureActions({ depth: 5 }); export const parameters = { viewport: { viewports: INITIAL_VIEWPORTS } }; ================================================ FILE: .storybook/theme.js ================================================ import { create } from '@storybook/theming'; export const theme = create({ base: 'light', brandTitle: 'chartist', brandUrl: 'https://github.com/chartist-js/chartist' }); ================================================ FILE: .tool-versions ================================================ pnpm 7.33.7 nodejs 18.18.0 ================================================ FILE: CHANGELOG.md ================================================ # Changelog All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. ## [1.5.0](https://github.com/chartist-js/chartist/compare/v1.4.0...v1.5.0) (2025-09-30) ### Features * support for viewport in SVG only providing width and height ([#1403](https://github.com/chartist-js/chartist/issues/1403)) ([752f0a7](https://github.com/chartist-js/chartist/commit/752f0a780cbff77e18ed43c1f1f9b9b4c63507b6)) ## [1.4.0](https://github.com/chartist-js/chartist/compare/v1.3.1...v1.4.0) (2025-06-27) ### Features * add option to prevent overlapping labels ([#1428](https://github.com/chartist-js/chartist/issues/1428)) ([552bfca](https://github.com/chartist-js/chartist/commit/552bfca452c97a2733bbf813832cefb6dd10fddc)) ### [1.3.1](https://github.com/chartist-js/chartist/compare/v1.3.0...v1.3.1) (2025-04-07) ### Bug Fixes * add an error message when chart container is not found ([#1392](https://github.com/chartist-js/chartist/issues/1392)) ([6ee19be](https://github.com/chartist-js/chartist/commit/6ee19be3a1936a3c1761aa2f3651683a02495543)) * prototype pollution vulnerability in extend (CVE-2024-45435) ([#1433](https://github.com/chartist-js/chartist/issues/1433)) ([5a24b93](https://github.com/chartist-js/chartist/commit/5a24b933d2ab4a97c30a24e9fa1da21c9c8083f1)), closes [#1427](https://github.com/chartist-js/chartist/issues/1427) * use clientWidth/clientHeight instead of getBoundingClientRect ([#1395](https://github.com/chartist-js/chartist/issues/1395)) ([1067900](https://github.com/chartist-js/chartist/commit/10679003a8cec24f9c1f559bdd0c241ec02319a4)) ## [1.3.0](https://github.com/chartist-js/chartist/compare/v1.2.1...v1.3.0) (2022-11-03) ### Features * accumulate-relative stacked bar chart stack mode ([#1375](https://github.com/chartist-js/chartist/issues/1375)) ([ce13067](https://github.com/chartist-js/chartist/commit/ce13067acec9cee050af979d323dae5e728292c4)), closes [#1167](https://github.com/chartist-js/chartist/issues/1167) ### Bug Fixes * add dist exports ([#1374](https://github.com/chartist-js/chartist/issues/1374)) ([1438bad](https://github.com/chartist-js/chartist/commit/1438bad5b8754fe0744c4c1c8540c08a4c4e6862)), closes [#1368](https://github.com/chartist-js/chartist/issues/1368) * add missing default for text-line-height ([#1373](https://github.com/chartist-js/chartist/issues/1373)) ([f94e559](https://github.com/chartist-js/chartist/commit/f94e559c2414d17002ee52421b860d91b6eae0af)) ### [1.2.1](https://github.com/chartist-js/chartist/compare/v1.2.0...v1.2.1) (2022-10-05) ### Bug Fixes * data normalization with alignment ([#1365](https://github.com/chartist-js/chartist/issues/1365)) ([fe11d2f](https://github.com/chartist-js/chartist/commit/fe11d2f6d9e55455286bc34d3eed93b587f1313c)), closes [#1235](https://github.com/chartist-js/chartist/issues/1235) * reverse data correctly [#1250](https://github.com/chartist-js/chartist/issues/1250) ([#1364](https://github.com/chartist-js/chartist/issues/1364)) ([0223b1f](https://github.com/chartist-js/chartist/commit/0223b1ff2c69a919e3d776b58fb9b5cc96654987)) ## [1.2.0](https://github.com/chartist-js/chartist/compare/v1.1.3...v1.2.0) (2022-10-03) ### Features * dist scss styles sources ([#1362](https://github.com/chartist-js/chartist/issues/1362)) ([d0efcb0](https://github.com/chartist-js/chartist/commit/d0efcb00aa45e1d4611a16472da758ead8148f7b)) * remove legacy styles fallbacks ([#1363](https://github.com/chartist-js/chartist/issues/1363)) ([831673f](https://github.com/chartist-js/chartist/commit/831673f9dff080d1c762db2bc5da397eb0b55ab9)) ### Bug Fixes * SvgPath.parse fails on negative values ([#1360](https://github.com/chartist-js/chartist/issues/1360)) ([cf6831d](https://github.com/chartist-js/chartist/commit/cf6831d2f7e08dddb497d6b7ce5354e0976779ab)) ### [1.1.3](https://github.com/chartist-js/chartist/compare/v1.1.2...v1.1.3) (2022-09-23) ### Bug Fixes * B and I series have the same color value ([#1356](https://github.com/chartist-js/chartist/issues/1356)) ([6f5ad92](https://github.com/chartist-js/chartist/commit/6f5ad92795755b1e50775cf7b837d20700f3e334)) * label position fix ([#1357](https://github.com/chartist-js/chartist/issues/1357)) ([fbc13e2](https://github.com/chartist-js/chartist/commit/fbc13e22c334a46e9097f7115c1616fc0cc1077d)), closes [#1266](https://github.com/chartist-js/chartist/issues/1266) ### [1.1.2](https://github.com/chartist-js/chartist/compare/v1.1.1...v1.1.2) (2022-08-14) ### Bug Fixes * add id field to AnimationDefinition interface ([#1351](https://github.com/chartist-js/chartist/issues/1351)) ([4012c43](https://github.com/chartist-js/chartist/commit/4012c43942e2dd243a4e5983f25bf4c22ea42d91)) ### [1.1.1](https://github.com/chartist-js/chartist/compare/v1.1.0...v1.1.1) (2022-08-13) ### Bug Fixes * add styles to side effects ([#1350](https://github.com/chartist-js/chartist/issues/1350)) ([053bf97](https://github.com/chartist-js/chartist/commit/053bf978d825c6285da93af3558b8c0667676212)) ## [1.1.0](https://github.com/chartist-js/chartist/compare/v1.0.0...v1.1.0) (2022-08-13) ### Features * add ResponsiveOptions type helper, add generic type to Svg#getNode method ([#1347](https://github.com/chartist-js/chartist/issues/1347)) ([7dd3ba2](https://github.com/chartist-js/chartist/commit/7dd3ba2992751976bfdff9603021afa8fad140d8)) ### Bug Fixes * add Date type to members of Multi type ([#1348](https://github.com/chartist-js/chartist/issues/1348)) ([9bd8679](https://github.com/chartist-js/chartist/commit/9bd867958dd457b26cb697cf6b4d101944443755)) ## [1.0.0](https://github.com/chartist-js/chartist/compare/v0.11.4...v1.0.0) (2022-08-08) ### ⚠ BREAKING CHANGES * [new exports names](https://github.com/chartist-js/chartist#esm) * methods in EventEmitter were renamed: `addEventHandler` -> `on`, `removeEventHandler` -> `off` ([73e1c44](https://github.com/chartist-js/chartist/commit/73e1c44dc1abab4938dc623a3dc22caad92af6a8)) ### Features * [TypeScript support](https://github.com/chartist-js/chartist#typescript) ([ee4106e](https://github.com/chartist-js/chartist/commit/ee4106e04f3c081805dd79675340378f895c8290)) * [ESM support](https://github.com/chartist-js/chartist#esm) v0.11.0 - 11 Apr 2017 - Added CSP compatibility by using CSSOM instead of style attributes (Francisco Silva) - Added feature to render pie / donut chart as solid shape, allowing outlines (Sergey Kovalyov, Chris Carson) - Fixed XMLNS for foreignObjet content (Alfredo Matos) v0.10.0 - 23 Oct 2016 --------------------- - Added dominant-baseline styles for pie and donut charts (Gion Kunz) - Added public getNode on SVG api (Gion Kunz) - Added support for bar charts to have auto narrowing on AutoScaleAxis by overriding referenceValue (Jonathan Dumaine) - Added amdModuleId for better integration into webpack (Chris) - Added grid background to line and bar chart (hansmaad) - Added new LTS node version and included NPM run scripts (Gion Kunz) - Added correct meta data emission in events (Gion Kunz) - Fixed rounding issues where raw value was added instead of rounded (Gion Kunz) - Fixed step axis issue with axis stretch and series count 0 (Gion Kunz) - Fixed label position of single series pie / donut charts to be centered (Gion Kunz) - Fixed order or drawing pie and donut slices (Gion Kunz) - Fixed calculations of stepLength to only stretch ticksLength if > 1 (Alexander van Eck) - Fixed better handling of axisOptions.position and fallback to 'end' position (Alexander van Eck) - Fixed handling of holes in interpolation for multi-value series (James Watmuff) - Fixed function StepAxis() returning NaN (Joao Milton) - Fixed NaN issues in SVG when rendering Pie chart with only 0s (Alexander van Eck) - Fixed infinite loop in getBounds with a more robust increment (hansmaad) - Fixed performance of Chartist.extend (cheese83) - Fixed license reference issues in package.json (Jacob Quant) - Cleanup of data normalization changes and allows Date objects and booleans as values (Gion Kunz) - Cleanup refactoring for data management and normalization (Gion Kunz) v0.9.8 - 22 Jun 2016 -------------------- - Added monotone cubic interpolation which is now the default interpolation for line charts (James Watmuff) - Update zoom plugin to 0.2.1 (hansmaad) - Bugfix: Prevent infinite loop in getBounds if bounds.valueRange is very small, fixes #643 (hansmaad) - Bugfix: Correct update events during media changes (Rory Hunter) - Bugfix: prevent negative value for foreignObject width attribute (Jose Ignacio) - Fixed example line chart in getting started documentation (Robin Edbom) - Updated development pipeline dependencies (Gion Kunz) - Updated chartist tooltip plugin and example styles (Gion Kunz) - Fixed WTFPL License issue (Gion Kunz) v0.9.7 - 23 Feb 2016 -------------------- - Fixed bug with label and grid rendering on axis, fixes #621 v0.9.6 - 22 Feb 2016 -------------------- - Added dual licensing WTFPL and MIT, built new version (Gion Kunz) - Adding unminified CSS to dist output, fixes #506 (Gion Kunz) - Refactored namespaced attribute handling, fixes #584 (Gion Kunz) - Allow charts to be created without data and labels, fixes #598, fixes #588, fixes #537, fixes #425 (Gion Kunz> Found an Issue? If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request with a fix. ## Pre-requisites You will need the following to run a local development enviroment. - Node.js & npm - pnpm (`npm install -g pnpm`) - Text editor of your choice ## How to Run a Local Distribution 1. `cd` into your local copy of the repository. 2. Run `pnpm i` to install dependencies located in `package.json`. 5. Run `pnpm start:storybook` to start Storybook, or run `pnpm jest --watch` to run tests in watch mode. Congrats, you should now be able to see your local copy of the Chartist testbed. ## Submission Guidelines If you are creating a Pull Request, fork the repository and make any changes on the `develop` branch. ================================================ FILE: LICENSE-MIT ================================================ Copyright (c) 2013 Gion Kunz Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 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. ================================================ FILE: LICENSE-WTFPL ================================================ DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004 Copyright (C) 2004 Sam Hocevar Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 0. You just DO WHAT THE FUCK YOU WANT TO. ================================================ FILE: README.md ================================================ # Big welcome by the Chartist Guy [![NPM version][npm]][npm-url] [![Downloads][downloads]][downloads-url] [![Build status][build]][build-url] [![Coverage status][coverage]][coverage-url] [![Bundle size][size]][size-url] [![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url] [npm]: https://img.shields.io/npm/v/chartist.svg [npm-url]: https://www.npmjs.com/package/chartist [downloads]: https://img.shields.io/npm/dm/chartist.svg [downloads-url]: https://www.npmjs.com/package/chartist [build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml [build-url]: https://github.com/chartist-js/chartist/actions [coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg [coverage-url]: https://app.codecov.io/gh/chartist-js/chartist [size]: https://img.shields.io/bundlephobia/minzip/chartist [size-url]: https://bundlephobia.com/package/chartist [chat]: https://badges.gitter.im/gionkunz/chartist-js.svg [chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

The Chartist Guy

Chartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either: - use the wrong technologies for illustration (canvas) - weighs hundreds of kilobytes - are not flexible enough while keeping the configuration simple - are not friendly to designers - more annoying things That's why we started Chartist and our goal is to solve all of the above issues.
Quickstart   •   What is it made for?   •   What's new in v1?   •   Docs   •   Examples   •   Contribution
## Quickstart Install this library using your favorite package manager: ```sh pnpm add chartist # or yarn add chartist # or npm i chartist ``` Then, just import chart you want and use it: ```js import { BarChart } from 'chartist'; new BarChart('#chart', { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [ [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] ] }, { high: 10, low: -10, axisX: { labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null) } }); ```
Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-chartist), an open-source API for data apps.
[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-chartist) ## What is it made for? Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves. Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts. ## Plugins Coming soon.
For v0.11 Some features aren't right for the core product but there is a great set of plugins available which add features like: * [Axis labels](http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin) * [Tooltips at data points](https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin) * [Coloring above/below a threshold](https://gionkunz.github.io/chartist-js/plugins.html#threshold-plugin) and more. See all the plugins [here](https://gionkunz.github.io/chartist-js/plugins.html).
## Contribution We are looking for people who share the idea of having a simple, flexible charting library that is responsive and uses modern and future-proof technologies. The goal of this project is to create a responsive charting library where developers have their joy in using it and designers love it because of the designing flexibility they have. Please contribute to the project if you like the idea and the concept and help us to bring nice looking responsive open-source charts to the masses. Contribute if you like the Chartist Guy! ================================================ FILE: jest.config.json ================================================ { "testEnvironment": "jsdom", "testRegex": "(test|src)/.*\\.spec\\.(jsx?|tsx?)$", "setupFilesAfterEnv": ["/test/setup.js"], "transform": { "^.+\\.(t|j)sx?$": ["@swc/jest", { "env": { "targets": { "node": 14 } } }] }, "moduleNameMapper": { "^chartist-dev$": "/src", "^chartist-dev/styles$": "/test/mock/cssModule.js" }, "collectCoverage": true, "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!**/node_modules/**", "!**/*.stories.*" ], "coverageReporters": [ "lcovonly", "text" ] } ================================================ FILE: package.json ================================================ { "name": "chartist", "type": "module", "version": "1.5.0", "description": "Simple, responsive charts", "author": "Gion Kunz", "homepage": "https://chartist.dev", "license": "MIT OR WTFPL", "licenses": [ { "type": "WTFPL", "url": "https://github.com/chartist-js/chartist/blob/main/LICENSE-WTFPL" }, { "type": "MIT", "url": "https://github.com/chartist-js/chartist/blob/main/LICENSE-MIT" } ], "repository": { "type": "git", "url": "https://github.com/chartist-js/chartist.git" }, "bugs": { "url": "https://github.com/chartist-js/chartist/issues" }, "keywords": [ "chartist", "responsive charts", "charts", "charting" ], "engines": { "node": ">=14" }, "sideEffects": [ "*.css", "*.scss" ], "types": "./dist/index.d.ts", "style": "./dist/index.css", "unpkg": "./dist/index.umd.js", "jsdelivr": "./dist/index.umd.js", "main": "./src/index.ts", "publishConfig": { "main": "./dist/index.cjs", "module": "./dist/index.js", "exports": { ".": { "require": "./dist/index.cjs", "import": "./dist/index.js" }, "./dist/*": "./dist/*" }, "directory": "package" }, "files": [ "dist", "LICENSE-WTFPL", "LICENSE-MIT" ], "scripts": { "clear:package": "del ./package", "clear": "del ./package ./dist ./coverage", "prepublishOnly": "pnpm test && pnpm build && pnpm clear:package && clean-publish", "postpublish": "pnpm clear:package", "emitDeclarations": "tsc --project ./tsconfig.build.json --emitDeclarationOnly", "build:styles": "./scripts/styles.cjs ./src/styles/index.scss", "build": "rollup -c & pnpm build:styles & pnpm emitDeclarations", "start:storybook": "start-storybook -p 6006 --ci", "build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook", "jest": "jest -c jest.config.json", "test:size": "size-limit", "test:unit": "jest -c jest.config.json ./src", "test:storyshots": "jest -c jest.config.json ./test/storyshots.spec.js", "test": "pnpm lint && pnpm test:unit", "lint": "eslint './*.{js,ts,cjs}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts,cjs}' 'sandboxes/**/*.{js,ts}'", "format": "prettier --write './*.{js,ts}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{cjs,js,ts}' 'sandboxes/**/*.{js,ts}'", "commit": "cz", "updateGitHooks": "simple-git-hooks" }, "devDependencies": { "@babel/core": "^7.17.9", "@babel/eslint-parser": "^7.17.0", "@commitlint/cli": "^17.0.0", "@commitlint/config-conventional": "^17.0.0", "@commitlint/cz-commitlint": "^17.0.0", "@rollup/plugin-node-resolve": "^13.2.0", "@size-limit/preset-big-lib": "^7.0.8", "@storybook/addon-actions": "^6.4.22", "@storybook/addon-controls": "^6.4.22", "@storybook/addon-docs": "^6.4.22", "@storybook/addon-storyshots": "^6.4.22", "@storybook/addon-storyshots-puppeteer": "^6.4.22", "@storybook/addon-viewport": "^6.4.22", "@storybook/html": "^6.4.22", "@swc/core": "^1.2.165", "@swc/helpers": "^0.5.0", "@swc/jest": "^0.2.20", "@testing-library/jest-dom": "^5.16.4", "@types/faker": "^5.5.8", "@types/jest": "^27.5.1", "@types/node": "^18.0.0", "@types/testing-library__jest-dom": "^5.14.5", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", "browserslist": "^4.20.2", "clean-publish": "^4.0.1", "commitizen": "^4.2.4", "cssnano": "^4.1.11", "del": "^6.0.0", "del-cli": "^5.0.0", "eslint": "^8.15.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-jest": "^27.0.0", "eslint-plugin-jest-dom": "^4.0.1", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-testing-library": "^5.5.0", "faker": "^5.5.3", "http-server": "^14.1.0", "jest": "^27.5.1", "jest-image-snapshot": "^4.5.1", "nano-staged": "^0.8.0", "postcss": "^8.0.0", "postcss-loader": "^4.3.0", "postcss-preset-env": "^6.7.1", "prettier": "^2.6.2", "puppeteer": "^14.0.0", "rollup": "^2.70.1", "rollup-plugin-swc": "^0.2.1", "rollup-plugin-terser": "^7.0.2", "sass": "^1.50.1", "sass-loader": "^10.0.0", "simple-git-hooks": "^2.7.0", "size-limit": "^7.0.8", "swc-loader": "^0.2.3", "typescript": "^4.6.4" } } ================================================ FILE: pnpm-workspace.yaml ================================================ packages: - 'website' ================================================ FILE: postcss.config.cjs ================================================ const isProd = process.env.NODE_ENV !== 'development'; module.exports = { plugins: [ require('postcss-preset-env'), isProd && require('cssnano')({ preset: 'default' }) ].filter(Boolean) }; ================================================ FILE: rollup.config.js ================================================ import swc from 'rollup-plugin-swc'; import { nodeResolve } from '@rollup/plugin-node-resolve'; import { terser } from 'rollup-plugin-terser'; import pkg from './package.json'; const extensions = ['.js', '.ts', '.tsx']; const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_); const plugins = (targets, minify) => [ nodeResolve({ extensions }), swc({ jsc: { parser: { syntax: 'typescript' }, externalHelpers: true }, env: { targets }, module: { type: 'es6' }, sourceMaps: true }), minify && terser() ].filter(Boolean); export default [ { input: pkg.main, plugins: plugins('defaults, not ie 11, not ie_mob 11'), external, output: { file: pkg.publishConfig.main, format: 'cjs', exports: 'named', sourcemap: true } }, { input: pkg.main, plugins: plugins('defaults, not ie 11, not ie_mob 11', true), external: () => false, output: { file: pkg.unpkg, format: 'umd', name: 'Chartist', exports: 'named', sourcemap: true } }, { input: pkg.main, plugins: plugins('defaults and supports es6-module'), external, output: { file: pkg.publishConfig.module, format: 'es', sourcemap: true } } ]; ================================================ FILE: sandboxes/bar/bi-polar-interpolated/index.html ================================================
================================================ FILE: sandboxes/bar/bi-polar-interpolated/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart, BarChartOptions } from 'chartist'; const data = { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]] }; const options: BarChartOptions = { high: 10, low: -10, axisX: { labelInterpolationFnc(value, index) { return index % 2 === 0 ? value : null; } } }; new BarChart('#chart', data, options); ================================================ FILE: sandboxes/bar/bi-polar-interpolated/package.json ================================================ { "name": "bar-bi-polar-interpolated", "description": "Bi-polar bar chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/bi-polar-interpolated/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/distributed-series/index.html ================================================
================================================ FILE: sandboxes/bar/distributed-series/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'], series: [20, 60, 120, 200, 180, 20, 10] }, { distributeSeries: true } ); ================================================ FILE: sandboxes/bar/distributed-series/package.json ================================================ { "name": "bar-distributed-series", "description": "Distributed series", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/distributed-series/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/extreme-responsive/index.html ================================================
================================================ FILE: sandboxes/bar/extreme-responsive/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart, noop } from 'chartist'; new BarChart( '#chart', { labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'], series: [ [5, 4, 3, 7], [3, 2, 9, 5], [1, 5, 8, 4], [2, 3, 4, 6], [4, 1, 2, 1] ] }, { // Default mobile configuration stackBars: true, axisX: { labelInterpolationFnc: value => String(value) .split(/\s+/) .map(word => word[0]) .join('') }, axisY: { offset: 20 } }, [ // Options override for media > 400px [ 'screen and (min-width: 400px)', { reverseData: true, horizontalBars: true, axisX: { labelInterpolationFnc: noop }, axisY: { offset: 60 } } ], // Options override for media > 800px [ 'screen and (min-width: 800px)', { stackBars: false, seriesBarDistance: 10 } ], // Options override for media > 1000px [ 'screen and (min-width: 1000px)', { reverseData: false, horizontalBars: false, seriesBarDistance: 15 } ] ] ); ================================================ FILE: sandboxes/bar/extreme-responsive/package.json ================================================ { "name": "bar-extreme-responsive", "description": "Extreme responsive configuration", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/extreme-responsive/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/horizontal/index.html ================================================
================================================ FILE: sandboxes/bar/horizontal/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ], series: [ [5, 4, 3, 7, 5, 10, 3], [3, 2, 9, 5, 4, 6, 4] ] }, { seriesBarDistance: 10, reverseData: true, horizontalBars: true, axisY: { offset: 70 } } ); ================================================ FILE: sandboxes/bar/horizontal/package.json ================================================ { "name": "bar-horizontal", "description": "Horizontal bar chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/horizontal/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/label-position/index.html ================================================
================================================ FILE: sandboxes/bar/label-position/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [5, 4, 3, 7, 5, 10, 3], [3, 2, 9, 5, 4, 6, 4] ] }, { axisX: { // On the x-axis start means top and end means bottom position: 'start' }, axisY: { // On the y-axis start means left and end means right position: 'end' } } ); ================================================ FILE: sandboxes/bar/label-position/package.json ================================================ { "name": "bar-label-position", "description": "Label placement", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/label-position/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/multiline/index.html ================================================
================================================ FILE: sandboxes/bar/multiline/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: [ 'First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year' ], series: [ [60000, 40000, 80000, 70000], [40000, 30000, 70000, 65000], [8000, 3000, 10000, 6000] ] }, { seriesBarDistance: 10, axisX: { offset: 60 }, axisY: { offset: 80, labelInterpolationFnc: value => value + ' CHF', scaleMinSpace: 15 } } ); ================================================ FILE: sandboxes/bar/multiline/package.json ================================================ { "name": "bar-multiline", "description": "Multi-line labels", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/multiline/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/overlapping-bars/index.html ================================================
================================================ FILE: sandboxes/bar/overlapping-bars/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart, BarChartOptions, ResponsiveOptions } from 'chartist'; const data = { labels: [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], series: [ [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8], [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4] ] }; const options = { seriesBarDistance: 15 }; const responsiveOptions: ResponsiveOptions = [ [ 'screen and (min-width: 641px) and (max-width: 1024px)', { seriesBarDistance: 10, axisX: { labelInterpolationFnc: value => value } } ], [ 'screen and (max-width: 640px)', { seriesBarDistance: 5, axisX: { labelInterpolationFnc: value => String(value)[0] } } ] ]; new BarChart('#chart', data, options, responsiveOptions); ================================================ FILE: sandboxes/bar/overlapping-bars/package.json ================================================ { "name": "bar-overlapping-bars", "description": "Overlapping bars on mobile", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/overlapping-bars/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/stacked/index.html ================================================
================================================ FILE: sandboxes/bar/stacked/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [ [800000, 1200000, 1400000, 1300000], [200000, 400000, 500000, 300000], [100000, 200000, 400000, 600000] ] }, { stackBars: true, axisY: { labelInterpolationFnc: value => +value / 1000 + 'k' } } ).on('draw', data => { if (data.type === 'bar') { data.element.attr({ style: 'stroke-width: 30px' }); } }); ================================================ FILE: sandboxes/bar/stacked/package.json ================================================ { "name": "bar-stacked", "description": "Stacked bar chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/stacked/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/stacked-accumulate-relative/index.html ================================================
================================================ FILE: sandboxes/bar/stacked-accumulate-relative/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart } from 'chartist'; new BarChart( '#chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'], series: [ [5, 4, -3, -5], [5, -4, 3, -5] ] }, { stackBars: true, stackMode: 'accumulate-relative' } ); ================================================ FILE: sandboxes/bar/stacked-accumulate-relative/package.json ================================================ { "name": "bar-stacked", "description": "Stacked bar chart with accumulate-relative stack mode", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/stacked-accumulate-relative/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/bar/with-circle-modify-drawing/index.html ================================================
================================================ FILE: sandboxes/bar/with-circle-modify-drawing/index.ts ================================================ import 'chartist/dist/index.css'; import { BarChart, Svg, getMultiValue } from 'chartist'; // Create a simple bi-polar bar chart const chart = new BarChart( '#chart', { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]] }, { high: 10, low: -10, axisX: { labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null) } } ); // Listen for draw events on the bar chart chart.on('draw', data => { // If this draw event is of type bar we can use the data to create additional content if (data.type === 'bar') { // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value data.group.append( new Svg( 'circle', { cx: data.x2, cy: data.y2, r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5 }, 'ct-slice-pie' ) ); } }); ================================================ FILE: sandboxes/bar/with-circle-modify-drawing/package.json ================================================ { "name": "bar-with-circle-modify-drawing", "description": "Add peak circles using the draw events", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/bar/with-circle-modify-drawing/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/area/index.html ================================================
================================================ FILE: sandboxes/line/area/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [[5, 9, 7, 8, 5, 3, 5, 4]] }, { low: 0, showArea: true } ); ================================================ FILE: sandboxes/line/area/package.json ================================================ { "name": "line-area", "description": "Line chart with area", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/area/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/axis-auto/index.html ================================================
================================================ FILE: sandboxes/line/axis-auto/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, AutoScaleAxis } from 'chartist'; new LineChart( '#chart', { series: [ [ { x: 1, y: 100 }, { x: 2, y: 50 }, { x: 3, y: 25 }, { x: 5, y: 12.5 }, { x: 8, y: 6.25 } ] ] }, { axisX: { type: AutoScaleAxis, onlyInteger: true } } ); ================================================ FILE: sandboxes/line/axis-auto/package.json ================================================ { "name": "line-axis-auto", "description": "Auto scale axis", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/axis-auto/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/axis-fixed-and-auto/index.html ================================================
================================================ FILE: sandboxes/line/axis-fixed-and-auto/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, AutoScaleAxis, FixedScaleAxis, Interpolation } from 'chartist'; new LineChart( '#chart', { series: [ [ { x: 1, y: 100 }, { x: 2, y: 50 }, { x: 3, y: 25 }, { x: 5, y: 12.5 }, { x: 8, y: 6.25 } ] ] }, { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: FixedScaleAxis, ticks: [0, 50, 75, 87.5, 100], low: 0 }, lineSmooth: Interpolation.step(), showPoint: false } ); ================================================ FILE: sandboxes/line/axis-fixed-and-auto/package.json ================================================ { "name": "line-axis-fixed-and-auto", "description": "Fixed and auto scale axis", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/axis-fixed-and-auto/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/bipolar-area/index.html ================================================
================================================ FILE: sandboxes/line/bipolar-area/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [1, 2, 3, 1, -2, 0, 1, 0], [-2, -1, -2, -1, -2.5, -1, -2, -1], [0, 0, 0, 1, 2, 2.5, 2, 1], [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5] ] }, { high: 3, low: -3, showArea: true, showLine: false, showPoint: false, fullWidth: true, axisX: { showLabel: false, showGrid: false } } ); ================================================ FILE: sandboxes/line/bipolar-area/package.json ================================================ { "name": "line-bipolar-area", "description": "Bi-polar Line chart with area only", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/bipolar-area/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/data-fill-holes/index.html ================================================
================================================ FILE: sandboxes/line/data-fill-holes/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, Interpolation } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], series: [ [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], [ 10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null ], [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null], [ { x: 3, y: 3 }, { x: 4, y: 3 }, { x: 5, y: undefined }, { x: 6, y: 4 }, { x: 7, y: null }, { x: 8, y: 4 }, { x: 9, y: 4 } ] ] }, { fullWidth: true, chartPadding: { right: 10 }, lineSmooth: Interpolation.cardinal({ fillHoles: true }), low: 0 } ); ================================================ FILE: sandboxes/line/data-fill-holes/package.json ================================================ { "name": "line-data-fill-holes", "description": "Filled holes in data", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/data-fill-holes/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/data-holes/index.html ================================================
================================================ FILE: sandboxes/line/data-holes/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], series: [ [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], [ 10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null ], [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null], [ { x: 3, y: 3 }, { x: 4, y: 3 }, { x: 5, y: undefined }, { x: 6, y: 4 }, { x: 7, y: null }, { x: 8, y: 4 }, { x: 9, y: 4 } ] ] }, { fullWidth: true, chartPadding: { right: 10 }, low: 0 } ); ================================================ FILE: sandboxes/line/data-holes/package.json ================================================ { "name": "line-data-holes", "description": "Holes in data", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/data-holes/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/modify-drawing/index.html ================================================
================================================ FILE: sandboxes/line/modify-drawing/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, Svg } from 'chartist'; const chart = new LineChart('#chart', { labels: [1, 2, 3, 4, 5], series: [[12, 9, 7, 8, 5]] }); // Listening for draw events that get emitted by the Chartist chart chart.on('draw', data => { // If the draw event was triggered from drawing a point on the line chart if (data.type === 'point') { // We are creating a new path SVG element that draws a triangle around the point coordinates const triangle = new Svg( 'path', { d: [ 'M', data.x, data.y - 15, 'L', data.x - 15, data.y + 8, 'L', data.x + 15, data.y + 8, 'z' ].join(' '), style: 'fill-opacity: 1' }, 'ct-area' ); // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle data.element.replace(triangle); } }); ================================================ FILE: sandboxes/line/modify-drawing/package.json ================================================ { "name": "line-modify-drawing", "description": "Using events to replace graphics", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/modify-drawing/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/only-integer/index.html ================================================
================================================ FILE: sandboxes/line/only-integer/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [1, 2, 3, 1, -2, 0, 1, 0], [-2, -1, -2, -1, -3, -1, -2, -1], [0, 0, 0, 1, 2, 3, 2, 1], [3, 2, 1, 0.5, 1, 0, -1, -3] ] }, { high: 3, low: -3, fullWidth: true, // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis axisY: { onlyInteger: true, offset: 20 } } ); ================================================ FILE: sandboxes/line/only-integer/package.json ================================================ { "name": "line-only-integer", "description": "Only whole numbers", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/only-integer/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/path-animation/index.html ================================================
================================================ FILE: sandboxes/line/path-animation/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, easings } from 'chartist'; const chart = new LineChart( '#chart', { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], series: [ [1, 5, 2, 5, 4, 3], [2, 3, 4, 8, 1, 2], [5, 4, 3, 2, 1, 0.5] ] }, { low: 0, showArea: true, showPoint: false, fullWidth: true } ); chart.on('draw', data => { if (data.type === 'line' || data.type === 'area') { data.element.animate({ d: { begin: 2000 * data.index, dur: 2000, from: data.path .clone() .scale(1, 0) .translate(0, data.chartRect.height()) .stringify(), to: data.path.clone().stringify(), easing: easings.easeOutQuint } }); } }); ================================================ FILE: sandboxes/line/path-animation/package.json ================================================ { "name": "line-path-animation", "description": "SVG Path animation", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/path-animation/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/scatter-random/index.html ================================================
================================================ FILE: sandboxes/line/scatter-random/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, times } from 'chartist'; const data = times(52).reduce<{ labels: number[]; series: number[][]; }>( (accData, _, index) => { accData.labels.push(index + 1); accData.series.forEach(series => { series.push(Math.random() * 100); }); return accData; }, { labels: [], series: times(4).map(() => []) } ); new LineChart( '#chart', data, { showLine: false, axisX: { labelInterpolationFnc(value, index) { return index % 13 === 0 ? 'W' + value : null; } } }, [ [ 'screen and (min-width: 640px)', { axisX: { labelInterpolationFnc(value, index) { return index % 4 === 0 ? 'W' + value : null; } } } ] ] ); ================================================ FILE: sandboxes/line/scatter-random/package.json ================================================ { "name": "line-scatter-random", "description": "Line scatter diagram with responsive settings", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/scatter-random/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/series-override/index.html ================================================
================================================ FILE: sandboxes/line/series-override/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, Interpolation } from 'chartist'; new LineChart( '#chart', { labels: ['1', '2', '3', '4', '5', '6', '7', '8'], // Naming the series with the series object array notation series: [ { name: 'series-1', data: [5, 2, -4, 2, 0, -2, 5, -3] }, { name: 'series-2', data: [4, 3, 5, 3, 1, 3, 6, 4] }, { name: 'series-3', data: [2, 4, 3, 1, 4, 5, 3, 2] } ] }, { fullWidth: true, // Within the series options you can use the series names // to specify configuration that will only be used for the // specific series. series: { 'series-1': { lineSmooth: Interpolation.step() }, 'series-2': { lineSmooth: Interpolation.simple(), showArea: true }, 'series-3': { showPoint: false } } }, [ // You can even use responsive configuration overrides to // customize your series configuration even further! [ 'screen and (max-width: 320px)', { series: { 'series-1': { lineSmooth: Interpolation.none() }, 'series-2': { lineSmooth: Interpolation.none(), showArea: false }, 'series-3': { lineSmooth: Interpolation.none(), showPoint: true } } } ] ] ); ================================================ FILE: sandboxes/line/series-override/package.json ================================================ { "name": "line-series-override", "description": "Series Overrides", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/series-override/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/simple/index.html ================================================
================================================ FILE: sandboxes/line/simple/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; new LineChart( '#chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 } } ); ================================================ FILE: sandboxes/line/simple/package.json ================================================ { "name": "line-simple", "description": "Simple line chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/simple/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/simple-responsive/index.html ================================================
================================================ FILE: sandboxes/line/simple-responsive/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, LineChartOptions, ResponsiveOptions } from 'chartist'; /* Add a basic data series with six labels and values */ const data = { labels: ['1', '2', '3', '4', '5', '6'], series: [ { data: [1, 2, 3, 5, 8, 13] } ] }; /* Set some base options (settings will override the default settings in js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */ const options: LineChartOptions = { axisX: { labelInterpolationFnc: value => 'Calendar Week ' + value } }; /* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */ const responsiveOptions: ResponsiveOptions = [ [ 'screen and (min-width: 641px) and (max-width: 1024px)', { showPoint: false, axisX: { labelInterpolationFnc: value => 'Week ' + value } } ], [ 'screen and (max-width: 640px)', { showLine: false, axisX: { labelInterpolationFnc: value => 'W' + value } } ] ]; /* Initialize the chart with the above settings */ new LineChart('#chart', data, options, responsiveOptions); ================================================ FILE: sandboxes/line/simple-responsive/package.json ================================================ { "name": "line-simple-responsive", "description": "Simple responsive options", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/simple-responsive/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/simple-smoothing/index.html ================================================
================================================ FILE: sandboxes/line/simple-smoothing/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, Interpolation } from 'chartist'; new LineChart( '#chart', { labels: [1, 2, 3, 4, 5], series: [ [1, 5, 10, 0, 1], [10, 15, 0, 1, 2] ] }, { // Remove this configuration to see that chart rendered with cardinal spline interpolation // Sometimes, on large jumps in data values, it's better to use simple smoothing. lineSmooth: Interpolation.simple({ divisor: 2 }), fullWidth: true, chartPadding: { right: 20 }, low: 0 } ); ================================================ FILE: sandboxes/line/simple-smoothing/package.json ================================================ { "name": "line-simple-smoothing", "description": "Line Interpolation / Smoothing", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/simple-smoothing/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/simple-svg-animation/index.html ================================================
================================================ FILE: sandboxes/line/simple-svg-animation/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, easings } from 'chartist'; const chart = new LineChart( '#chart', { labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], series: [ [12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6], [4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10] ] }, { low: 0, showLine: false, axisX: { showLabel: false, offset: 0 }, axisY: { showLabel: false, offset: 0 } } ); // Let's put a sequence number aside so we can use it in the event callbacks let seq = 0; // Once the chart is fully created we reset the sequence chart.on('created', () => { seq = 0; }); // On each drawn element by Chartist we use the Svg API to trigger SMIL animations chart.on('draw', data => { if (data.type === 'point') { // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations. data.element.animate({ opacity: { // The delay when we like to start the animation begin: seq++ * 80, // Duration of the animation dur: 500, // The value where the animation should start from: 0, // The value where it should end to: 1 }, x1: { begin: seq++ * 80, dur: 500, from: data.x - 100, to: data.x, // You can specify an easing function name or use easing functions from `easings` directly easing: easings.easeOutQuart } }); } }); let timerId: any; // For the sake of the example we update the chart every time it's created with a delay of 8 seconds chart.on('created', () => { if (timerId) { clearTimeout(timerId); } timerId = setTimeout(chart.update.bind(chart), 8000); }); ================================================ FILE: sandboxes/line/simple-svg-animation/package.json ================================================ { "name": "line-simple-svg-animation", "description": "Simple SMIL Animations", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/simple-svg-animation/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/svg-animation/index.html ================================================
================================================ FILE: sandboxes/line/svg-animation/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart } from 'chartist'; const chart = new LineChart( '#chart', { labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], series: [ [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6], [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5], [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4], [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3] ] }, { low: 0 } ); // Let's put a sequence number aside so we can use it in the event callbacks let seq = 0; const delays = 80; const durations = 500; // Once the chart is fully created we reset the sequence chart.on('created', () => { seq = 0; }); // On each drawn element by Chartist we use the Svg API to trigger SMIL animations chart.on('draw', data => { seq++; if (data.type === 'line') { // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations. data.element.animate({ opacity: { // The delay when we like to start the animation begin: seq * delays + 1000, // Duration of the animation dur: durations, // The value where the animation should start from: 0, // The value where it should end to: 1 } }); } else if (data.type === 'label' && data.axis.counterUnits.pos === 'x') { data.element.animate({ y: { begin: seq * delays, dur: durations, from: data.y + 100, to: data.y, // We can specify an easing function from Svg.Easing easing: 'easeOutQuart' } }); } else if (data.type === 'label' && data.axis.counterUnits.pos === 'y') { data.element.animate({ x: { begin: seq * delays, dur: durations, from: data.x - 100, to: data.x, easing: 'easeOutQuart' } }); } else if (data.type === 'point') { data.element.animate({ x1: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' }, x2: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' }, opacity: { begin: seq * delays, dur: durations, from: 0, to: 1, easing: 'easeOutQuart' } }); } else if (data.type === 'grid') { // Using data.axis we get x or y which we can use to construct our animation definition objects const pos1Key = (data.axis.units.pos + '1') as `${typeof data.axis.units.pos}1`; const pos1Value = data[pos1Key]; const pos1Animation = { begin: seq * delays, dur: durations, from: pos1Value - 30, to: pos1Value, easing: 'easeOutQuart' as const }; const pos2Key = (data.axis.units.pos + '2') as `${typeof data.axis.units.pos}2`; const pos2Value = data[pos2Key]; const pos2Animation = { begin: seq * delays, dur: durations, from: pos2Value - 100, to: pos2Value, easing: 'easeOutQuart' as const }; const animations = { [data.axis.units.pos + '1']: pos1Animation, [data.axis.units.pos + '2']: pos2Animation, opacity: { begin: seq * delays, dur: durations, from: 0, to: 1, easing: 'easeOutQuart' as const } }; data.element.animate(animations); } }); let timerId: any; // For the sake of the example we update the chart every time it's created with a delay of 8 seconds chart.on('created', () => { if (timerId) { clearTimeout(timerId); } timerId = setTimeout(chart.update.bind(chart), 12000); }); ================================================ FILE: sandboxes/line/svg-animation/package.json ================================================ { "name": "line-svg-animation", "description": "Advanced SMIL Animations", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/svg-animation/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/line/timeseries/index.html ================================================
================================================ FILE: sandboxes/line/timeseries/index.ts ================================================ import 'chartist/dist/index.css'; import { LineChart, FixedScaleAxis } from 'chartist'; new LineChart( '#chart', { series: [ { name: 'series-1', data: [ { x: new Date(143134652600), y: 53 }, { x: new Date(143234652600), y: 40 }, { x: new Date(143340052600), y: 45 }, { x: new Date(143366652600), y: 40 }, { x: new Date(143410652600), y: 20 }, { x: new Date(143508652600), y: 32 }, { x: new Date(143569652600), y: 18 }, { x: new Date(143579652600), y: 11 } ] }, { name: 'series-2', data: [ { x: new Date(143134652600), y: 53 }, { x: new Date(143234652600), y: 35 }, { x: new Date(143334652600), y: 30 }, { x: new Date(143384652600), y: 30 }, { x: new Date(143568652600), y: 10 } ] } ] }, { axisX: { type: FixedScaleAxis, divisor: 5, labelInterpolationFnc: value => new Date(value).toLocaleString(undefined, { month: 'short', day: 'numeric' }) } } ); ================================================ FILE: sandboxes/line/timeseries/package.json ================================================ { "name": "line-timeseries", "description": "Timeseries", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/line/timeseries/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/pie/custom-labels/index.html ================================================
================================================ FILE: sandboxes/pie/custom-labels/index.ts ================================================ import 'chartist/dist/index.css'; import { PieChart, PieChartOptions, ResponsiveOptions } from 'chartist'; const data = { labels: ['Bananas', 'Apples', 'Grapes'], series: [20, 15, 40] }; const options: PieChartOptions = { labelInterpolationFnc: value => String(value)[0] }; const responsiveOptions: ResponsiveOptions = [ [ 'screen and (min-width: 640px)', { chartPadding: 30, labelOffset: 100, labelDirection: 'explode', labelInterpolationFnc: value => value } ], [ 'screen and (min-width: 1024px)', { labelOffset: 80, chartPadding: 20 } ] ]; new PieChart('#chart', data, options, responsiveOptions); ================================================ FILE: sandboxes/pie/custom-labels/package.json ================================================ { "name": "pie-custom-labels", "description": "Pie chart with custom labels", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/pie/custom-labels/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/pie/donut-animation/index.html ================================================
================================================ FILE: sandboxes/pie/donut-animation/index.ts ================================================ import 'chartist/dist/index.css'; import { PieChart, easings, AnimationDefinition } from 'chartist'; const chart = new PieChart( '#chart', { series: [10, 20, 50, 20, 5, 50, 15], labels: [1, 2, 3, 4, 5, 6, 7] }, { donut: true, showLabel: false } ); chart.on('draw', data => { if (data.type === 'slice') { // Get the total path length in order to use for dash array animation const pathLength = data.element .getNode() .getTotalLength(); // Set a dasharray that matches the path length as prerequisite to animate dashoffset data.element.attr({ 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px' }); // Create animation definition while also assigning an ID to the animation for later sync usage const animationDefinition: Record = { 'stroke-dashoffset': { id: 'anim' + data.index, dur: 1000, from: -pathLength + 'px', to: '0px', easing: easings.easeOutQuint, // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible) fill: 'freeze' } }; // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation if (data.index !== 0) { animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end'; } // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us data.element.attr({ 'stroke-dashoffset': -pathLength + 'px' }); // We can't use guided mode as the animations need to rely on setting begin manually data.element.animate(animationDefinition, false); } }); let timerId: any; // For the sake of the example we update the chart every time it's created with a delay of 8 seconds chart.on('created', () => { if (timerId) { clearTimeout(timerId); } timerId = setTimeout(chart.update.bind(chart), 10000); }); ================================================ FILE: sandboxes/pie/donut-animation/package.json ================================================ { "name": "pie-donut-animation", "description": "Animating a Donut with Svg.animate", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/pie/donut-animation/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/pie/donut-chart/index.html ================================================
================================================ FILE: sandboxes/pie/donut-chart/index.ts ================================================ import 'chartist/dist/index.css'; import { PieChart } from 'chartist'; new PieChart( '#chart', { series: [20, 10, 30, 40] }, { donut: true, donutWidth: 60, startAngle: 270, showLabel: true } ); ================================================ FILE: sandboxes/pie/donut-chart/package.json ================================================ { "name": "pie-donut-chart", "description": "Donut chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/pie/donut-chart/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/pie/simple/index.html ================================================
================================================ FILE: sandboxes/pie/simple/index.ts ================================================ import 'chartist/dist/index.css'; import { PieChart } from 'chartist'; const data = { series: [5, 3, 4] }; new PieChart('#chart', data, { labelInterpolationFnc: value => Math.round((+value / data.series.reduce((a, b) => a + b)) * 100) + '%' }); ================================================ FILE: sandboxes/pie/simple/package.json ================================================ { "name": "pie-simple", "description": "Simple pie chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/pie/simple/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/pie/simple-gauge/index.html ================================================
================================================ FILE: sandboxes/pie/simple-gauge/index.ts ================================================ import 'chartist/dist/index.css'; import { PieChart } from 'chartist'; new PieChart( '#chart', { series: [20, 10, 30, 40] }, { donut: true, donutWidth: 60, startAngle: 270, total: 200, showLabel: false } ); ================================================ FILE: sandboxes/pie/simple-gauge/package.json ================================================ { "name": "pie-simple-gauge", "description": "Gauge chart", "main": "index.ts", "dependencies": { "chartist": "^1.0.0" } } ================================================ FILE: sandboxes/pie/simple-gauge/sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": true, "view": "browser", "template": "parcel" } ================================================ FILE: sandboxes/tsconfig.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "baseUrl": ".", "paths": { "chartist": ["../src"] } }, "include": ["."] } ================================================ FILE: scripts/styles.cjs ================================================ #!/usr/bin/env node const fs = require('fs').promises; const path = require('path'); const sass = require('sass'); const postcss = require('postcss'); const { plugins } = require('../postcss.config.cjs'); const pkg = require('../package.json'); const cwd = process.cwd(); const input = process.argv[2]; const output = pkg.style; const sourceMapOutput = output.replace('.css', '.css.map'); async function compile() { let styles; styles = sass.compile(input, { sourceMap: true }); styles.sourceMap.sources = styles.sourceMap.sources.map(_ => _.replace(cwd, '') ); styles = await postcss(plugins).process(styles.css, { from: input, to: output, map: { prev: styles.sourceMap } }); const map = styles.map.toString(); const css = styles.css + `\n/*# sourceMappingURL=${path.basename(sourceMapOutput)} */`; await fs.mkdir(path.dirname(output), { recursive: true }); await Promise.all([ fs.writeFile(output, css), fs.writeFile(sourceMapOutput, map) ]); } async function copySrc() { const srcDir = path.dirname(input); const distDir = path.dirname(output); const srcFiles = await fs.readdir(srcDir); await Promise.all( srcFiles.map(file => fs.copyFile(path.join(srcDir, file), path.join(distDir, file)) ) ); } Promise.all([compile(), copySrc()]); ================================================ FILE: src/axes/AutoScaleAxis.ts ================================================ import type { ChartRect, AxisOptions, Bounds, NormalizedSeries, NormalizedSeriesPrimitiveValue } from '../core'; import { getBounds, getHighLow, getMultiValue } from '../core'; import { AxisUnits, Axis } from './Axis'; export class AutoScaleAxis extends Axis { private readonly bounds: Bounds; public override readonly range: { min: number; max: number; }; constructor( axisUnit: AxisUnits, data: NormalizedSeries[], chartRect: ChartRect, options: AxisOptions ) { // Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options const highLow = options.highLow || getHighLow(data, options, axisUnit.pos); const bounds = getBounds( chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart], highLow, options.scaleMinSpace || 20, options.onlyInteger ); const range = { min: bounds.min, max: bounds.max }; super(axisUnit, chartRect, bounds.values); this.bounds = bounds; this.range = range; } projectValue(value: NormalizedSeriesPrimitiveValue) { const finalValue = Number(getMultiValue(value, this.units.pos)); return ( (this.axisLength * (finalValue - this.bounds.min)) / this.bounds.range ); } } ================================================ FILE: src/axes/Axis.spec.ts ================================================ import type { ChartRect } from '../core'; import { Svg } from '../svg'; import { EventEmitter } from '../event'; import { Axis, axisUnits } from './Axis'; class MockAxis extends Axis { projectValue(value: number) { return value; } } describe('Axes', () => { describe('Axis', () => { let ticks: number[]; let chartRect: ChartRect; let chartOptions: any; let eventEmitter: EventEmitter; let gridGroup: Svg; let labelGroup: Svg; beforeEach(() => { eventEmitter = new EventEmitter(); gridGroup = new Svg('g'); labelGroup = new Svg('g'); ticks = [1, 2]; chartRect = { padding: { bottom: 5, left: 10, right: 15, top: 15 }, y2: 15, y1: 250, x1: 50, x2: 450, width() { return this.x2 - this.x1; }, height() { return this.y1 - this.y2; } }; chartOptions = { axisX: { offset: 30, position: 'end', labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true }, classNames: { label: 'ct-label', labelGroup: 'ct-labels', grid: 'ct-grid', gridGroup: 'ct-grids', vertical: 'ct-vertical', horizontal: 'ct-horizontal', start: 'ct-start', end: 'ct-end' } }; }); it('should skip all grid lines and labels for interpolated value of null', () => { chartOptions.axisX.labelInterpolationFnc = ( value: number, index: number ) => (index === 0 ? null : value); const axis = new MockAxis(axisUnits.x, chartRect, ticks); axis.createGridAndLabels( gridGroup, labelGroup, chartOptions, eventEmitter ); expect( (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length ).toBe(1); expect( (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length ).toBe(1); }); it('should skip all grid lines and labels for interpolated value of undefined', () => { chartOptions.axisX.labelInterpolationFnc = ( value: number, index: number ) => (index === 0 ? undefined : value); const axis = new MockAxis(axisUnits.x, chartRect, ticks); axis.createGridAndLabels( gridGroup, labelGroup, chartOptions, eventEmitter ); expect( (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length ).toBe(1); expect( (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length ).toBe(1); }); it('should include all grid lines and labels for interpolated value of empty strings', () => { chartOptions.axisX.labelInterpolationFnc = ( value: number, index: number ) => (index === 0 ? '' : value); const axis = new MockAxis(axisUnits.x, chartRect, ticks); axis.createGridAndLabels( gridGroup, labelGroup, chartOptions, eventEmitter ); expect( (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length ).toBe(2); expect( (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length ).toBe(2); }); }); }); ================================================ FILE: src/axes/Axis.ts ================================================ import type { Label, ChartRect, OptionsWithDefaults, NormalizedSeriesPrimitiveValue, NormalizedSeries } from '../core'; import type { Svg } from '../svg'; import type { EventEmitter } from '../event'; import { isFalseyButZero } from '../utils'; import { createGrid, createLabel } from '../core'; export const axisUnits = { x: { pos: 'x', len: 'width', dir: 'horizontal', rectStart: 'x1', rectEnd: 'x2', rectOffset: 'y2' }, y: { pos: 'y', len: 'height', dir: 'vertical', rectStart: 'y2', rectEnd: 'y1', rectOffset: 'x1' } } as const; export type XAxisUnits = typeof axisUnits.x; export type YAxisUnits = typeof axisUnits.y; export type AxisUnits = XAxisUnits | YAxisUnits; export abstract class Axis { public readonly counterUnits: AxisUnits; public readonly range: | { min: number; max: number; } | undefined; readonly axisLength: number; private readonly gridOffset: number; constructor( public readonly units: AxisUnits, private readonly chartRect: ChartRect, private readonly ticks: Label[] ) { this.counterUnits = units === axisUnits.x ? axisUnits.y : axisUnits.x; this.axisLength = chartRect[this.units.rectEnd] - chartRect[this.units.rectStart]; this.gridOffset = chartRect[this.units.rectOffset]; } abstract projectValue( value: NormalizedSeriesPrimitiveValue | Label, index?: number, series?: NormalizedSeries ): number; createGridAndLabels( gridGroup: Svg, labelGroup: Svg, chartOptions: OptionsWithDefaults, eventEmitter: EventEmitter ) { const axisOptions = this.units.pos === 'x' ? chartOptions.axisX : chartOptions.axisY; const projectedValues = this.ticks.map((tick, i) => this.projectValue(tick, i) ); const labelValues = this.ticks.map(axisOptions.labelInterpolationFnc); projectedValues.forEach((projectedValue, index) => { const labelValue = labelValues[index]; const labelOffset = { x: 0, y: 0 }; // TODO: Find better solution for solving this problem // Calculate how much space we have available for the label let labelLength; if (projectedValues[index + 1]) { // If we still have one label ahead, we can calculate the distance to the next tick / label labelLength = projectedValues[index + 1] - projectedValue; } else { // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will // still be visible inside of the chart padding. labelLength = Math.max( this.axisLength - projectedValue, this.axisLength / this.ticks.length ); } // Skip grid lines and labels where interpolated label values are falsey (except for 0) if (labelValue !== '' && isFalseyButZero(labelValue)) { return; } // Transform to global coordinates using the chartRect // We also need to set the label offset for the createLabel function if (this.units.pos === 'x') { projectedValue = this.chartRect.x1 + projectedValue; labelOffset.x = chartOptions.axisX.labelOffset.x; // If the labels should be positioned in start position (top side for vertical axis) we need to set a // different offset as for positioned with end (bottom) if (chartOptions.axisX.position === 'start') { labelOffset.y = this.chartRect.padding.top + chartOptions.axisX.labelOffset.y + 5; } else { labelOffset.y = this.chartRect.y1 + chartOptions.axisX.labelOffset.y + 5; } } else { projectedValue = this.chartRect.y1 - projectedValue; labelOffset.y = chartOptions.axisY.labelOffset.y - labelLength; // If the labels should be positioned in start position (left side for horizontal axis) we need to set a // different offset as for positioned with end (right side) if (chartOptions.axisY.position === 'start') { labelOffset.x = this.chartRect.padding.left + chartOptions.axisY.labelOffset.x; } else { labelOffset.x = this.chartRect.x2 + chartOptions.axisY.labelOffset.x + 10; } } if (axisOptions.showGrid) { createGrid( projectedValue, index, this, this.gridOffset, this.chartRect[this.counterUnits.len](), gridGroup, [ chartOptions.classNames.grid, chartOptions.classNames[this.units.dir] ], eventEmitter ); } if (axisOptions.showLabel) { createLabel( projectedValue, labelLength, index, labelValue, this, axisOptions.offset, labelOffset, labelGroup, [ chartOptions.classNames.label, chartOptions.classNames[this.units.dir], axisOptions.position === 'start' ? chartOptions.classNames[axisOptions.position] : chartOptions.classNames.end ], eventEmitter ); } }); } } ================================================ FILE: src/axes/FixedScaleAxis.spec.ts ================================================ import { FixedScaleAxis } from './FixedScaleAxis'; describe('Axes', () => { describe('FixedScaleAxis', () => { it('should order the tick array', () => { const ticks = [10, 5, 0, -5, -10]; const axisUnit = { pos: 'y', len: 'height', dir: 'vertical', rectStart: 'y2', rectEnd: 'y1', rectOffset: 'x1' } as const; const data = [ [ { x: 1, y: 10 }, { x: 2, y: 5 }, { x: 3, y: -5 } ] ]; const chartRect: any = { padding: { top: 15, right: 15, bottom: 5, left: 10 }, y2: 15, y1: 141, x1: 50, x2: 269 }; const options = { offset: 40, position: 'start' as const, labelOffset: { x: 0, y: 0 }, showLabel: true, showGrid: true, scaleMinSpace: 20, onlyInteger: false, ticks }; const fsaxis: any = new FixedScaleAxis( axisUnit, data, chartRect, options ); expect(fsaxis.ticks).toEqual([-10, -5, 0, 5, 10]); }); }); }); ================================================ FILE: src/axes/FixedScaleAxis.ts ================================================ import type { ChartRect, AxisOptions, NormalizedSeries, NormalizedSeriesPrimitiveValue } from '../core'; import { getMultiValue, getHighLow } from '../core/data'; import { times } from '../utils'; import { AxisUnits, Axis } from './Axis'; export class FixedScaleAxis extends Axis { public override readonly range: { min: number; max: number; }; constructor( axisUnit: AxisUnits, data: NormalizedSeries[], chartRect: ChartRect, options: AxisOptions ) { const highLow = options.highLow || getHighLow(data, options, axisUnit.pos); const divisor = options.divisor || 1; const ticks = ( options.ticks || times( divisor, index => highLow.low + ((highLow.high - highLow.low) / divisor) * index ) ).sort((a, b) => Number(a) - Number(b)); const range = { min: highLow.low, max: highLow.high }; super(axisUnit, chartRect, ticks); this.range = range; } projectValue(value: NormalizedSeriesPrimitiveValue) { const finalValue = Number(getMultiValue(value, this.units.pos)); return ( (this.axisLength * (finalValue - this.range.min)) / (this.range.max - this.range.min) ); } } ================================================ FILE: src/axes/StepAxis.spec.ts ================================================ import { StepAxis } from './StepAxis'; describe('Axes', () => { describe('StepAxis', () => { it('should return 0 if options.ticks.length == 1', () => { const ticks = [1]; const axisUnit = { pos: 'y', len: 'height', dir: 'vertical', rectStart: 'y2', rectEnd: 'y1', rectOffset: 'x1' } as const; const data = [[1]]; const chartRect: any = { y2: 0, y1: 15, x1: 50, x2: 100 }; const options = { ticks }; const stepAxis: any = new StepAxis(axisUnit, data, chartRect, options); expect(stepAxis.stepLength).toEqual(15); }); }); }); ================================================ FILE: src/axes/StepAxis.ts ================================================ import type { ChartRect, AxisOptions } from '../core'; import { AxisUnits, Axis } from './Axis'; export class StepAxis extends Axis { private readonly stepLength: number; public readonly stretch: boolean; constructor( axisUnit: AxisUnits, _data: unknown, chartRect: ChartRect, options: AxisOptions ) { const ticks = options.ticks || []; super(axisUnit, chartRect, ticks); const calc = Math.max(1, ticks.length - (options.stretch ? 1 : 0)); this.stepLength = this.axisLength / calc; this.stretch = Boolean(options.stretch); } projectValue(_value: unknown, index: number) { return this.stepLength * index; } } ================================================ FILE: src/axes/index.ts ================================================ export * from './Axis'; export * from './AutoScaleAxis'; export * from './FixedScaleAxis'; export * from './StepAxis'; export * from './types'; ================================================ FILE: src/axes/types.ts ================================================ import type { AutoScaleAxis } from './AutoScaleAxis'; import type { FixedScaleAxis } from './FixedScaleAxis'; import type { StepAxis } from './StepAxis'; export type AxisType = | typeof AutoScaleAxis | typeof FixedScaleAxis | typeof StepAxis; ================================================ FILE: src/charts/BarChart/BarChart.spec.ts ================================================ import { AutoScaleAxis } from '../../axes'; import { BarChartOptions, BarChartData, BarChart } from '.'; import { namespaces, deserialize } from '../../core'; import { Fixture, addMockWrapper, destroyMockDom, mockDom, mockDomRects, destroyMockDomRects } from '../../../test/mock/dom'; describe('Charts', () => { describe('BarChart', () => { let fixture: Fixture; let chart: BarChart; let options: BarChartOptions; let data: BarChartData; function createChart() { return new Promise(resolve => { fixture = addMockWrapper( '
' ); const { wrapper } = fixture; chart = new BarChart( wrapper.querySelector('.ct-chart'), data, options ).on('created', () => { resolve(); chart.off('created'); }); }); } beforeEach(() => { mockDom(); mockDomRects(); }); afterEach(() => { destroyMockDom(); destroyMockDomRects(); data = { series: [] }; options = {}; }); describe('grids', () => { beforeEach(() => { data = { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }; options = { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: AutoScaleAxis, onlyInteger: true } }; }); it('should contain ct-grids group', async () => { data = { series: [] }; options = {}; await createChart(); expect(fixture.wrapper.querySelectorAll('g.ct-grids').length).toBe(1); }); it('should draw grid lines', async () => { await createChart(); expect( fixture.wrapper.querySelectorAll( 'g.ct-grids line.ct-grid.ct-horizontal' ).length ).toBe(3); expect( fixture.wrapper.querySelectorAll( 'g.ct-grids line.ct-grid.ct-vertical' ).length ).toBe(6); }); it('should draw grid background', async () => { options.showGridBackground = true; await createChart(); expect( fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background') .length ).toBe(1); }); it('should not draw grid background if option set to false', async () => { options.showGridBackground = false; await createChart(); expect( fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background') .length ).toBe(0); }); }); describe('ct:value attribute', () => { it('should contain x and y value for each bar', async () => { data = { series: [ [ { x: 1, y: 2 }, { x: 3, y: 4 } ] ] }; options = { axisX: { type: AutoScaleAxis } }; await createChart(); const bars = fixture.wrapper.querySelectorAll('.ct-bar'); expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('1,2'); expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('3,4'); }); it('should render values that are zero', async () => { data = { series: [ [ { x: 0, y: 1 }, { x: 2, y: 0 }, { x: 0, y: 0 } ] ] }; options = { axisX: { type: AutoScaleAxis } }; await createChart(); const bars = fixture.wrapper.querySelectorAll('.ct-bar'); expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('0,1'); expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('2,0'); expect(bars[2].getAttributeNS(namespaces.ct, 'value')).toEqual('0,0'); }); }); describe('Meta data tests', () => { it('should render meta data correctly with mixed value array', async () => { const meta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'], series: [ [ 5, 2, 4, { value: 2, meta: meta }, 0 ] ] }; await createChart(); const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3]; expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual( meta ); }); it('should render meta data correctly with mixed value array and different normalized data length', async () => { const meta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [ 5, 2, 4, { value: 2, meta: meta }, 0 ] ] }; await createChart(); const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3]; expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual( meta ); }); it('should render meta data correctly with mixed value array and mixed series notation', async () => { const seriesMeta = 9999; const valueMeta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [ 5, 2, 4, { value: 2, meta: valueMeta }, 0 ], { meta: seriesMeta, data: [ 5, 2, { value: 2, meta: valueMeta }, 0 ] } ] }; await createChart(); expect( deserialize( fixture.wrapper .querySelectorAll('.ct-series-a .ct-bar')[3] .getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(valueMeta); expect( deserialize( fixture.wrapper .querySelector('.ct-series-b') ?.getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(seriesMeta); expect( deserialize( fixture.wrapper .querySelectorAll('.ct-series-b .ct-bar')[2] .getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(valueMeta); }); }); describe('Empty data tests', () => { it('should render empty grid with no data', async () => { data = { series: [] }; options = {}; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); it('should render empty grid with only labels', async () => { data = { labels: [1, 2, 3, 4], series: [] }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); // Find exactly as many horizontal grid lines as labels were specified (Step Axis) expect( document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length ).toBe(data.labels?.length); }); it('should generate labels and render empty grid with only series in data', async () => { data = { series: [ [1, 2, 3, 4], [2, 3, 4], [3, 4] ] }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); // Should generate the labels using the largest series count expect( document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length ).toBe( Math.max( ...data.series.map(series => Array.isArray(series) ? series.length : 0 ) ) ); }); it('should render empty grid with no data and specified high low', async () => { options = { width: 400, height: 300, high: 100, low: -100 }; await createChart(); // Find first and last label const labels = document.querySelectorAll( '.ct-labels .ct-label.ct-vertical' ); const firstLabel = labels[0]; const lastLabel = labels[labels.length - 1]; expect(firstLabel.textContent?.trim()).toBe('-100'); expect(lastLabel.textContent?.trim()).toBe('100'); }); it('should render empty grid with no data and reverseData option', async () => { options = { reverseData: true }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); it('should render empty grid with no data and stackBars option', async () => { options = { stackBars: true }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); it('should render empty grid with no data and horizontalBars option', async () => { options = { horizontalBars: true }; await createChart(); // Find at least one vertical grid line // TODO: In theory the axis should be created with ct-horizontal class expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); it('should render empty grid with no data and distributeSeries option', async () => { options = { distributeSeries: true }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); }); it('should correct apply class names', async () => { data = { labels: ['A', 'B', 'C'], series: [ { className: 'series-1', data: [1, 2, 3] }, { className: 'series-2', data: [4, 5, 6] } ] }; options = { reverseData: true }; await createChart(); const seriesElements = document.querySelectorAll('.ct-series'); expect(seriesElements[0]).toHaveClass('series-2'); expect(seriesElements[0]).toContainHTML('ct:value="6"'); expect(seriesElements[1]).toHaveClass('series-1'); expect(seriesElements[1]).toContainHTML('ct:value="3"'); }); }); }); ================================================ FILE: src/charts/BarChart/BarChart.stories.ts ================================================ import 'chartist-dev/styles'; import { BarChart, AutoScaleAxis, Svg, getMultiValue } from 'chartist-dev'; import { Viewport } from '../../../test/utils/storyshots/viewport'; export default { title: 'BarChart', argTypes: {} }; export function Default() { const root = document.createElement('div'); new BarChart( root, { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }, { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: AutoScaleAxis, onlyInteger: true } } ); return root; } export function BiPolar() { const root = document.createElement('div'); new BarChart( root, { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]] }, { high: 10, low: -10, axisX: { labelInterpolationFnc(value, index) { return index % 2 === 0 ? value : null; } } } ); return root; } export function Labels() { const root = document.createElement('div'); new BarChart( root, { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'], series: [[5, 2, 4, 2, 0]] }, {} ); return root; } export function MultilineLabels() { const root = document.createElement('div'); new BarChart( root, { labels: [ 'First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year' ], series: [ [60000, 40000, 80000, 70000], [40000, 30000, 70000, 65000], [8000, 3000, 10000, 6000] ] }, { seriesBarDistance: 10, axisX: { offset: 60 }, axisY: { offset: 80, labelInterpolationFnc(value) { return value + ' CHF'; }, scaleMinSpace: 15 } } ); return root; } export function LabelsPlacement() { const root = document.createElement('div'); new BarChart( root, { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [5, 4, 3, 7, 5, 10, 3], [3, 2, 9, 5, 4, 6, 4] ] }, { axisX: { // On the x-axis start means top and end means bottom position: 'start' }, axisY: { // On the y-axis start means left and end means right position: 'end' } } ); return root; } export function MultiSeries() { const root = document.createElement('div'); new BarChart( root, { series: [ [1, 2, 3, 4], [2, 3, 4], [3, 4] ] }, {} ); return root; } export function DistributedSeries() { const root = document.createElement('div'); new BarChart( root, { labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'], series: [20, 60, 120, 200, 180, 20, 10] }, { distributeSeries: true } ); return root; } export function ReverseData() { const root = document.createElement('div'); new BarChart( root, { series: [ [1, 2, 3, 4], [2, 3, 4], [3, 4] ] }, { reverseData: true } ); return root; } export function Stack() { const root = document.createElement('div'); new BarChart( root, { labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [ [800000, 1200000, 1400000, 1300000], [200000, 400000, 500000, 300000], [100000, 200000, 400000, 600000] ] }, { stackBars: true, axisY: { labelInterpolationFnc(value) { return Number(value) / 1000 + 'k'; } } } ).on('draw', data => { if (data.type === 'bar') { data.element.attr({ style: 'stroke-width: 30px' }); } }); return root; } export function Horizontal() { const root = document.createElement('div'); new BarChart( root, { labels: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ], series: [ [5, 4, 3, 7, 5, 10, 3], [3, 2, 9, 5, 4, 6, 4] ] }, { seriesBarDistance: 10, reverseData: true, horizontalBars: true, axisY: { offset: 70 } } ); return root; } export function Adaptive() { const root = document.createElement('div'); new BarChart( root, { labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'], series: [ [5, 4, 3, 7], [3, 2, 9, 5], [1, 5, 8, 4], [2, 3, 4, 6], [4, 1, 2, 1] ] }, { // Default mobile configuration stackBars: true, axisX: { labelInterpolationFnc: value => String(value) .split(/\s+/) .map(word => word[0]) .join('') }, axisY: { offset: 20 } }, [ // Options override for media > 400px [ 'screen and (min-width: 400px)', { reverseData: true, horizontalBars: true, axisX: { labelInterpolationFnc: () => undefined }, axisY: { offset: 60 } } ], // Options override for media > 800px [ 'screen and (min-width: 800px)', { stackBars: false, seriesBarDistance: 10 } ], // Options override for media > 1000px [ 'screen and (min-width: 1000px)', { reverseData: false, horizontalBars: false, seriesBarDistance: 15 } ] ] ); return root; } Adaptive.parameters = { storyshots: { viewports: [ Viewport.Default, Viewport.Tablet, Viewport.MobileLandscape, Viewport.Mobile ] } }; export function OverlappingBarsOnMobile() { const root = document.createElement('div'); new BarChart( root, { labels: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], series: [ [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8], [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4] ] }, { seriesBarDistance: 10 }, [ [ 'screen and (max-width: 640px)', { seriesBarDistance: 5, axisX: { labelInterpolationFnc(value) { return String(value)[0]; } } } ] ] ); return root; } OverlappingBarsOnMobile.parameters = { storyshots: { viewports: [Viewport.Default, Viewport.Mobile] } }; export function PeakCircles() { const root = document.createElement('div'); new BarChart( root, { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]] }, { high: 10, low: -10, axisX: { labelInterpolationFnc(value, index) { return index % 2 === 0 ? value : null; } } } ).on('draw', data => { // If this draw event is of type bar we can use the data to create additional content if (data.type === 'bar') { // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value data.group.append( new Svg( 'circle', { cx: data.x2, cy: data.y2, r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5 }, 'ct-slice-pie' ) ); } }); return root; } export function AccumulateRelativeStack() { const root = document.createElement('div'); new BarChart( root, { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'], series: [ [5, 4, -3, -5], [5, -4, 3, -5] ] }, { stackBars: true, stackMode: 'accumulate-relative' } ); return root; } export function ViewBox() { const root = document.createElement('div'); new BarChart( root, { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }, { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: AutoScaleAxis, onlyInteger: true }, viewBox: { width: 800, height: 300 } }, [ [ 'screen and (max-width: 575px)', { viewBox: { width: 400, height: 150 } } ] ] ); return root; } ================================================ FILE: src/charts/BarChart/BarChart.ts ================================================ import type { Axis } from '../../axes'; import type { BarChartData, BarChartOptions, BarChartOptionsWithDefaults, BarChartCreatedEvent, BarDrawEvent, BarChartEventsTypes } from './BarChart.types'; import type { NormalizedSeries, ResponsiveOptions, AllSeriesTypes } from '../../core'; import { isNumeric, noop, serialMap, extend, safeHasProperty, each } from '../../utils'; import { alphaNumerate, normalizeData, serialize, getMetaData, getHighLow, createSvg, createChartRect, createGridBackground } from '../../core'; import { AutoScaleAxis, StepAxis, axisUnits } from '../../axes'; import { BaseChart } from '../BaseChart'; function getSerialSums(series: NormalizedSeries[]) { return serialMap(series, (...args) => Array.from(args).reduce<{ x: number; y: number }>( (prev, curr) => { return { x: prev.x + (safeHasProperty(curr, 'x') ? curr.x : 0), y: prev.y + (safeHasProperty(curr, 'y') ? curr.y : 0) }; }, { x: 0, y: 0 } ) ); } /** * Default options in bar charts. Expand the code view to see a detailed list of options with comments. */ const defaultOptions = { // Options for X-Axis axisX: { // The offset of the chart drawing area to the border of the container offset: 30, // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis. position: 'end' as const, // Allows you to correct label positioning on this axis by positive or negative x and y offset. labelOffset: { x: 0, y: 0 }, // If labels should be shown or not showLabel: true, // If the axis grid should be drawn or not showGrid: true, // Interpolation function that allows you to intercept the value from the axis label labelInterpolationFnc: noop, // This value specifies the minimum width in pixel of the scale steps scaleMinSpace: 30, // Use only integer values (whole numbers) for the scale steps onlyInteger: false }, // Options for Y-Axis axisY: { // The offset of the chart drawing area to the border of the container offset: 40, // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis. position: 'start' as const, // Allows you to correct label positioning on this axis by positive or negative x and y offset. labelOffset: { x: 0, y: 0 }, // If labels should be shown or not showLabel: true, // If the axis grid should be drawn or not showGrid: true, // Interpolation function that allows you to intercept the value from the axis label labelInterpolationFnc: noop, // This value specifies the minimum height in pixel of the scale steps scaleMinSpace: 20, // Use only integer values (whole numbers) for the scale steps onlyInteger: false }, // Specify a fixed width for the chart as a string (i.e. '100px' or '50%') width: undefined, // Specify a fixed height for the chart as a string (i.e. '100px' or '50%') height: undefined, // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value high: undefined, // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value low: undefined, // Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale. referenceValue: 0, // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5} chartPadding: { top: 15, right: 15, bottom: 5, left: 10 }, // Specify the distance in pixel of bars in a group seriesBarDistance: 15, // If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options. stackBars: false, // If set to true this property will force the stacked bars to draw from the zero line. // If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect. // If set to 'accumulate-relative' positive and negative values will be handled separately. stackMode: 'accumulate' as const, // Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values. horizontalBars: false, // If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time. distributeSeries: false, // If true the whole data is reversed including labels, the series order as well as the whole series data arrays. reverseData: false, // If the bar chart should add a background fill to the .ct-grids group. showGridBackground: false, // Override the class names that get used to generate the SVG structure of the chart classNames: { chart: 'ct-chart-bar', horizontalBars: 'ct-horizontal-bars', label: 'ct-label', labelGroup: 'ct-labels', series: 'ct-series', bar: 'ct-bar', grid: 'ct-grid', gridGroup: 'ct-grids', gridBackground: 'ct-grid-background', vertical: 'ct-vertical', horizontal: 'ct-horizontal', start: 'ct-start', end: 'ct-end' } }; export class BarChart extends BaseChart { /** * This method creates a new bar chart and returns API object that you can use for later changes. * @param query A selector query string or directly a DOM element * @param data The data object that needs to consist of a labels and a series array * @param options The options object with options that override the default options. Check the examples for a detailed list. * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]] * @return An object which exposes the API for the created chart * * @example * ```ts * // Create a simple bar chart * const data = { * labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], * series: [ * [5, 2, 4, 2, 0] * ] * }; * * // In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object. * new BarChart('.ct-chart', data); * ``` * * @example * ```ts * // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10 * new BarChart('.ct-chart', { * labels: [1, 2, 3, 4, 5, 6, 7], * series: [ * [1, 3, 2, -5, -3, 1, -6], * [-5, -2, -4, -1, 2, -3, 1] * ] * }, { * seriesBarDistance: 12, * low: -10, * high: 10 * }); * ``` */ constructor( query: string | Element | null, protected override data: BarChartData, options?: BarChartOptions, responsiveOptions?: ResponsiveOptions ) { super( query, data, defaultOptions, extend({}, defaultOptions, options), responsiveOptions ); } /** * Creates a new chart */ createChart(options: BarChartOptionsWithDefaults) { const { data } = this; const normalizedData = normalizeData( data, options.reverseData, options.horizontalBars ? 'x' : 'y', true ); // Create new svg element const svg = createSvg( this.container, options.width, options.height, options.classNames.chart + (options.horizontalBars ? ' ' + options.classNames.horizontalBars : ''), options.viewBox ); const highLow = options.stackBars && options.stackMode !== true && normalizedData.series.length ? // If stacked bars we need to calculate the high low from stacked values from each series getHighLow( [getSerialSums(normalizedData.series)], options, options.horizontalBars ? 'x' : 'y' ) : getHighLow( normalizedData.series, options, options.horizontalBars ? 'x' : 'y' ); this.svg = svg; // Drawing groups in correct order const gridGroup = svg.elem('g').addClass(options.classNames.gridGroup); const seriesGroup = svg.elem('g'); const labelGroup = svg.elem('g').addClass(options.classNames.labelGroup); // Overrides of high / low from settings if (typeof options.high === 'number') { highLow.high = options.high; } if (typeof options.low === 'number') { highLow.low = options.low; } const chartRect = createChartRect(svg, options); let valueAxis: Axis; const labelAxisTicks = // We need to set step count based on some options combinations options.distributeSeries && options.stackBars ? // If distributed series are enabled and bars need to be stacked, we'll only have one bar and therefore should // use only the first label for the step axis normalizedData.labels.slice(0, 1) : // If distributed series are enabled but stacked bars aren't, we should use the series labels // If we are drawing a regular bar chart with two dimensional series data, we just use the labels array // as the bars are normalized normalizedData.labels; let labelAxis: Axis; let axisX: Axis; let axisY: Axis; // Set labelAxis and valueAxis based on the horizontalBars setting. This setting will flip the axes if necessary. if (options.horizontalBars) { if (options.axisX.type === undefined) { valueAxis = axisX = new AutoScaleAxis( axisUnits.x, normalizedData.series, chartRect, { ...options.axisX, highLow: highLow, referenceValue: 0 } ); } else { // eslint-disable-next-line new-cap valueAxis = axisX = new options.axisX.type( axisUnits.x, normalizedData.series, chartRect, { ...options.axisX, highLow: highLow, referenceValue: 0 } ); } if (options.axisY.type === undefined) { labelAxis = axisY = new StepAxis( axisUnits.y, normalizedData.series, chartRect, { ticks: labelAxisTicks } ); } else { // eslint-disable-next-line new-cap labelAxis = axisY = new options.axisY.type( axisUnits.y, normalizedData.series, chartRect, options.axisY ); } } else { if (options.axisX.type === undefined) { labelAxis = axisX = new StepAxis( axisUnits.x, normalizedData.series, chartRect, { ticks: labelAxisTicks } ); } else { // eslint-disable-next-line new-cap labelAxis = axisX = new options.axisX.type( axisUnits.x, normalizedData.series, chartRect, options.axisX ); } if (options.axisY.type === undefined) { valueAxis = axisY = new AutoScaleAxis( axisUnits.y, normalizedData.series, chartRect, { ...options.axisY, highLow: highLow, referenceValue: 0 } ); } else { // eslint-disable-next-line new-cap valueAxis = axisY = new options.axisY.type( axisUnits.y, normalizedData.series, chartRect, { ...options.axisY, highLow: highLow, referenceValue: 0 } ); } } // Projected 0 point const zeroPoint = options.horizontalBars ? chartRect.x1 + valueAxis.projectValue(0) : chartRect.y1 - valueAxis.projectValue(0); const isAccumulateStackMode = options.stackMode === 'accumulate'; const isAccumulateRelativeStackMode = options.stackMode === 'accumulate-relative'; // Used to track the screen coordinates of stacked bars const posStackedBarValues: number[] = []; const negStackedBarValues: number[] = []; let stackedBarValues = posStackedBarValues; labelAxis.createGridAndLabels( gridGroup, labelGroup, options, this.eventEmitter ); valueAxis.createGridAndLabels( gridGroup, labelGroup, options, this.eventEmitter ); if (options.showGridBackground) { createGridBackground( gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter ); } // Draw the series each( data.series, (series, seriesIndex) => { // Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc. const biPol = seriesIndex - (data.series.length - 1) / 2; // Half of the period width between vertical grid lines used to position bars let periodHalfLength: number; // We need to set periodHalfLength based on some options combinations if (options.distributeSeries && !options.stackBars) { // If distributed series are enabled but stacked bars aren't, we need to use the length of the normaizedData array // which is the series count and divide by 2 periodHalfLength = labelAxis.axisLength / normalizedData.series.length / 2; } else if (options.distributeSeries && options.stackBars) { // If distributed series and stacked bars are enabled we'll only get one bar so we should just divide the axis // length by 2 periodHalfLength = labelAxis.axisLength / 2; } else { // On regular bar charts we should just use the series length periodHalfLength = labelAxis.axisLength / normalizedData.series[seriesIndex].length / 2; } // Adding the series group to the series element const seriesElement = seriesGroup.elem('g'); const seriesName = safeHasProperty(series, 'name') && series.name; const seriesClassName = safeHasProperty(series, 'className') && series.className; const seriesMeta = safeHasProperty(series, 'meta') ? series.meta : undefined; // Write attributes to series group element. If series name or meta is undefined the attributes will not be written if (seriesName) { seriesElement.attr({ 'ct:series-name': seriesName }); } if (seriesMeta) { seriesElement.attr({ 'ct:meta': serialize(seriesMeta) }); } // Use series class from series data or if not set generate one seriesElement.addClass( [ options.classNames.series, seriesClassName || `${options.classNames.series}-${alphaNumerate(seriesIndex)}` ].join(' ') ); normalizedData.series[seriesIndex].forEach((value, valueIndex) => { const valueX = safeHasProperty(value, 'x') && value.x; const valueY = safeHasProperty(value, 'y') && value.y; let labelAxisValueIndex; // We need to set labelAxisValueIndex based on some options combinations if (options.distributeSeries && !options.stackBars) { // If distributed series are enabled but stacked bars aren't, we can use the seriesIndex for later projection // on the step axis for label positioning labelAxisValueIndex = seriesIndex; } else if (options.distributeSeries && options.stackBars) { // If distributed series and stacked bars are enabled, we will only get one bar and therefore always use // 0 for projection on the label step axis labelAxisValueIndex = 0; } else { // On regular bar charts we just use the value index to project on the label step axis labelAxisValueIndex = valueIndex; } let projected; // We need to transform coordinates differently based on the chart layout if (options.horizontalBars) { projected = { x: chartRect.x1 + valueAxis.projectValue( valueX || 0, valueIndex, normalizedData.series[seriesIndex] ), y: chartRect.y1 - labelAxis.projectValue( valueY || 0, labelAxisValueIndex, normalizedData.series[seriesIndex] ) }; } else { projected = { x: chartRect.x1 + labelAxis.projectValue( valueX || 0, labelAxisValueIndex, normalizedData.series[seriesIndex] ), y: chartRect.y1 - valueAxis.projectValue( valueY || 0, valueIndex, normalizedData.series[seriesIndex] ) }; } // If the label axis is a step based axis we will offset the bar into the middle of between two steps using // the periodHalfLength value. Also we do arrange the different series so that they align up to each other using // the seriesBarDistance. If we don't have a step axis, the bar positions can be chosen freely so we should not // add any automated positioning. if (labelAxis instanceof StepAxis) { // Offset to center bar between grid lines, but only if the step axis is not stretched if (!labelAxis.stretch) { projected[labelAxis.units.pos] += periodHalfLength * (options.horizontalBars ? -1 : 1); } // Using bi-polar offset for multiple series if no stacked bars or series distribution is used projected[labelAxis.units.pos] += options.stackBars || options.distributeSeries ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1); } // distinguish between positive and negative values in relative stack mode if (isAccumulateRelativeStackMode) { stackedBarValues = valueY >= 0 || valueX >= 0 ? posStackedBarValues : negStackedBarValues; } // Enter value in stacked bar values used to remember previous screen value for stacking up bars const previousStack = stackedBarValues[valueIndex] || zeroPoint; stackedBarValues[valueIndex] = previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]); // Skip if value is undefined if (value === undefined) { return; } const positions = { [`${labelAxis.units.pos}1`]: projected[labelAxis.units.pos], [`${labelAxis.units.pos}2`]: projected[labelAxis.units.pos] } as Record<'x1' | 'y1' | 'x2' | 'y2', number>; if ( options.stackBars && (isAccumulateStackMode || isAccumulateRelativeStackMode || !options.stackMode) ) { // Stack mode: accumulate (default) // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line // We want backwards compatibility, so the expected fallback without the 'stackMode' option // to be the original behaviour (accumulate) positions[`${labelAxis.counterUnits.pos}1`] = previousStack; positions[`${labelAxis.counterUnits.pos}2`] = stackedBarValues[valueIndex]; } else { // Draw from the zero line normally // This is also the same code for Stack mode: overlap positions[`${labelAxis.counterUnits.pos}1`] = zeroPoint; positions[`${labelAxis.counterUnits.pos}2`] = projected[labelAxis.counterUnits.pos]; } // Limit x and y so that they are within the chart rect positions.x1 = Math.min( Math.max(positions.x1, chartRect.x1), chartRect.x2 ); positions.x2 = Math.min( Math.max(positions.x2, chartRect.x1), chartRect.x2 ); positions.y1 = Math.min( Math.max(positions.y1, chartRect.y2), chartRect.y1 ); positions.y2 = Math.min( Math.max(positions.y2, chartRect.y2), chartRect.y1 ); const metaData = getMetaData(series, valueIndex); // Create bar element const bar = seriesElement .elem('line', positions, options.classNames.bar) .attr({ 'ct:value': [valueX, valueY].filter(isNumeric).join(','), 'ct:meta': serialize(metaData) }); this.eventEmitter.emit('draw', { type: 'bar', value, index: valueIndex, meta: metaData, series, seriesIndex, axisX, axisY, chartRect, group: seriesElement, element: bar, ...positions }); }); }, options.reverseData ); this.eventEmitter.emit('created', { chartRect, axisX, axisY, svg, options }); } } ================================================ FILE: src/charts/BarChart/BarChart.types.ts ================================================ import type { Options, AxisOptions, Data, CreatedEvent, DrawEvent, NormalizedMulti, AxesDrawEvent } from '../../core'; import type { RequiredKeys } from '../../utils'; import type { BaseChartEventsTypes } from '../types'; export type BarChartData = Data; export interface BarChartOptions< TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions > extends Options { /** * Override the class names that get used to generate the SVG structure of the chart */ classNames?: { chart?: string; horizontalBars?: string; label?: string; labelGroup?: string; series?: string; bar?: string; grid?: string; gridGroup?: string; gridBackground?: string; vertical?: string; horizontal?: string; start?: string; end?: string; }; /** * Specify the distance in pixel of bars in a group */ seriesBarDistance?: number; /** * If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options. */ stackBars?: boolean; /** * If set to true this property will force the stacked bars to draw from the zero line. * If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect. * If set to 'accumulate-relative' positive and negative values will be handled separately. */ stackMode?: 'accumulate' | 'accumulate-relative' | boolean; /** * Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values. */ horizontalBars?: boolean; /** * If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time. */ distributeSeries?: boolean; /** * If true the whole data is reversed including labels, the series order as well as the whole series data arrays. */ reverseData?: boolean; /** * If the bar chart should add a background fill to the .ct-grids group. */ showGridBackground?: boolean; } export type BarChartOptionsWithDefaults = RequiredKeys< BarChartOptions< RequiredKeys< AxisOptions, | 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace' >, RequiredKeys< AxisOptions, | 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace' > >, | 'referenceValue' | 'chartPadding' | 'seriesBarDistance' | 'stackMode' | 'axisX' | 'axisY', 'classNames' >; export type BarChartCreatedEvent = CreatedEvent; export interface BarDrawEvent extends DrawEvent { type: 'bar'; value: number | NormalizedMulti; x1: number; y1: number; x2: number; y2: number; } export type BarChartEventsTypes = BaseChartEventsTypes< BarChartCreatedEvent, AxesDrawEvent | BarDrawEvent >; ================================================ FILE: src/charts/BarChart/index.ts ================================================ export * from './BarChart'; export * from './BarChart.types'; ================================================ FILE: src/charts/BaseChart.ts ================================================ import type { Data, Options, DataEvent, ResponsiveOptions } from '../core'; import type { Svg } from '../svg'; import type { BaseChartEventsTypes } from './types'; import { OptionsProvider, optionsProvider } from '../core'; import { extend } from '../utils'; import { EventListener, AllEventsListener, EventEmitter } from '../event'; const instances = new WeakMap>(); export abstract class BaseChart { protected svg?: Svg; protected readonly container: Element; protected readonly eventEmitter = new EventEmitter(); private readonly resizeListener = () => this.update(); // Using event loop for first draw to make it possible to register event listeners in the same call stack where // the chart was created. private initializeTimeoutId: NodeJS.Timer | null = setTimeout( () => this.initialize(), 0 ); private optionsProvider?: OptionsProvider; constructor( query: string | Element | null, protected data: Data, private readonly defaultOptions: Options, private options: Options, private readonly responsiveOptions?: ResponsiveOptions ) { const container = typeof query === 'string' ? document.querySelector(query) : query; if (!container) { throw new Error( `Target element ${ typeof query === 'string' ? `"${query}"` : '' } is not found` ); } this.container = container; const prevInstance = instances.get(container); // If chartist was already initialized in this container we are detaching all event listeners first if (prevInstance) { prevInstance.detach(); } instances.set(container, this); } abstract createChart(options: Options): void; // TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance. // This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not // work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage. // See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html // Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj // The problem is with the label offsets that can't be converted into percentage and affecting the chart container /** * Updates the chart which currently does a full reconstruction of the SVG DOM * @param data Optional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart. * @param options Optional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart. * @param override If set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base */ update(data?: Data, options?: Options, override = false) { if (data) { this.data = data || {}; this.data.labels = this.data.labels || []; this.data.series = this.data.series || []; // Event for data transformation that allows to manipulate the data before it gets rendered in the charts this.eventEmitter.emit('data', { type: 'update', data: this.data }); } if (options) { this.options = extend( {}, override ? this.options : this.defaultOptions, options ); // If chartist was not initialized yet, we just set the options and leave the rest to the initialization // Otherwise we re-create the optionsProvider at this point if (!this.initializeTimeoutId) { this.optionsProvider?.removeMediaQueryListeners(); this.optionsProvider = optionsProvider( this.options, this.responsiveOptions, this.eventEmitter ); } } // Only re-created the chart if it has been initialized yet if (!this.initializeTimeoutId && this.optionsProvider) { this.createChart(this.optionsProvider.getCurrentOptions()); } // Return a reference to the chart object to chain up calls return this; } /** * This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically. */ detach() { // Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore // the initializationTimeoutId is still a valid timeout reference, we will clear the timeout if (!this.initializeTimeoutId) { window.removeEventListener('resize', this.resizeListener); this.optionsProvider?.removeMediaQueryListeners(); } else { window.clearTimeout(this.initializeTimeoutId); } instances.delete(this.container); return this; } /** * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop. * @param event Name of the event. Check the examples for supported events. * @param listener The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details. */ on( event: T, listener: EventListener ): this; on(event: '*', listener: AllEventsListener): this; on(event: string, listener: EventListener): this; // eslint-disable-next-line @typescript-eslint/no-explicit-any on(event: string, listener: any) { this.eventEmitter.on(event, listener); return this; } /** * Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered. * @param event Name of the event for which a handler should be removed * @param listener The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list. */ off( event: T, listener?: EventListener ): this; off(event: '*', listener?: AllEventsListener): this; off(event: string, listener?: EventListener): this; // eslint-disable-next-line @typescript-eslint/no-explicit-any off(event: string, listener?: any) { this.eventEmitter.off(event, listener); return this; } initialize() { // Add window resize listener that re-creates the chart window.addEventListener('resize', this.resizeListener); // Obtain current options based on matching media queries (if responsive options are given) // This will also register a listener that is re-creating the chart based on media changes this.optionsProvider = optionsProvider( this.options, this.responsiveOptions, this.eventEmitter ); // Register options change listener that will trigger a chart update this.eventEmitter.on('optionsChanged', () => this.update()); // Before the first chart creation we need to register us with all plugins that are configured // Initialize all relevant plugins with our chart object and the plugin options specified in the config if (this.options.plugins) { this.options.plugins.forEach(plugin => { if (Array.isArray(plugin)) { plugin[0](this, plugin[1]); } else { plugin(this); } }); } // Event for data transformation that allows to manipulate the data before it gets rendered in the charts this.eventEmitter.emit('data', { type: 'initial', data: this.data }); // Create the first chart this.createChart(this.optionsProvider.getCurrentOptions()); // As chart is initialized from the event loop now we can reset our timeout reference // This is important if the chart gets initialized on the same element twice this.initializeTimeoutId = null; } } ================================================ FILE: src/charts/LineChart/LineChart.spec.ts ================================================ import { AutoScaleAxis, FixedScaleAxis } from '../../axes'; import { LineChartOptions, LineChartData, LineChart } from '.'; import * as Interpolation from '../../interpolation'; import { namespaces, deserialize } from '../../core'; import { Fixture, addMockWrapper, destroyMockDom, mockDom, mockDomRects, destroyMockDomRects } from '../../../test/mock/dom'; describe('Charts', () => { describe('LineChart', () => { let fixture: Fixture; let chart: LineChart; let options: LineChartOptions; let data: LineChartData; function createChart() { return new Promise(resolve => { fixture = addMockWrapper( '
' ); const { wrapper } = fixture; chart = new LineChart( wrapper.querySelector('.ct-chart'), data, options ).on('created', () => { resolve(); chart.off('created'); }); }); } beforeEach(() => { mockDom(); mockDomRects(); }); afterEach(() => { destroyMockDom(); destroyMockDomRects(); data = { series: [] }; options = {}; }); describe('grids', () => { beforeEach(() => { data = { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }; options = { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: AutoScaleAxis, onlyInteger: true } }; }); it('should contain ct-grids group', async () => { await createChart(); expect(fixture.wrapper.querySelectorAll('.ct-grids').length).toBe(1); }); it('should draw grid lines', async () => { await createChart(); expect( fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-horizontal') .length ).toBe(3); expect( fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-vertical') .length ).toBe(5); }); it('should draw grid background', async () => { options.showGridBackground = true; await createChart(); expect( fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background') .length ).toBe(1); }); it('should not draw grid background if option set to false', async () => { options.showGridBackground = false; await createChart(); expect( fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background') .length ).toBe(0); }); }); describe('AxisY position tests', () => { beforeEach(() => { data = { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }; options = {}; }); it('should have ct-start class if position start', async () => { options = { axisY: { position: 'start' } }; await createChart(); Array.from( fixture.wrapper.querySelectorAll('.ct-label.ct-vertical') ).forEach(element => expect(element).toHaveAttribute( 'class', 'ct-label ct-vertical ct-start' ) ); }); it('should have ct-end class if position is any other value than start', async () => { options = { axisY: { position: 'end' as const } }; await createChart(); Array.from( fixture.wrapper.querySelectorAll('.ct-label.ct-vertical') ).forEach(element => expect(element).toHaveAttribute( 'class', 'ct-label ct-vertical ct-end' ) ); }); }); describe('ct:value attribute', () => { it('should contain x and y value for each datapoint', async () => { data = { series: [ [ { x: 1, y: 2 }, { x: 3, y: 4 } ] ] }; options = { axisX: { type: FixedScaleAxis } }; await createChart(); const points = fixture.wrapper.querySelectorAll('.ct-point'); expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('1,2'); expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('3,4'); }); it('should render values that are zero', async () => { data = { series: [ [ { x: 0, y: 1 }, { x: 1, y: 0 }, { x: 0, y: 0 } ] ] }; options = { axisX: { type: FixedScaleAxis } }; await createChart(); const points = fixture.wrapper.querySelectorAll('.ct-point'); expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('0,1'); expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('1,0'); expect(points[2].getAttributeNS(namespaces.ct, 'value')).toBe('0,0'); }); }); describe('Meta data tests', () => { it('should render meta data correctly with mixed value array', async () => { const meta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'], series: [ [ 5, 2, 4, { value: 2, meta: meta }, 0 ] ] }; await createChart(); const points = fixture.wrapper.querySelectorAll('.ct-point'); expect( deserialize(points[3].getAttributeNS(namespaces.ct, 'meta')) ).toEqual(meta); }); it('should render meta data correctly with mixed value array and different normalized data length', async () => { const meta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [ 5, 2, 4, { value: 2, meta: meta }, 0 ] ] }; await createChart(); const points = fixture.wrapper.querySelectorAll('.ct-point'); expect( deserialize(points[3].getAttributeNS(namespaces.ct, 'meta')) ).toEqual(meta); }); it('should render meta data correctly with mixed value array and mixed series notation', async () => { const seriesMeta = 9999; const valueMeta = { test: 'Serialized Test' }; data = { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [ 5, 2, 4, { value: 2, meta: valueMeta }, 0 ], { meta: seriesMeta, data: [ 5, 2, { value: 2, meta: valueMeta }, 0 ] } ] }; await createChart(); expect( deserialize( fixture.wrapper .querySelectorAll('.ct-series-a .ct-point')[3] .getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(valueMeta); expect( deserialize( fixture.wrapper .querySelector('.ct-series-b') ?.getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(seriesMeta); expect( deserialize( fixture.wrapper .querySelectorAll('.ct-series-b .ct-point')[2] .getAttributeNS(namespaces.ct, 'meta') ) ).toEqual(valueMeta); }); }); describe('Line charts with holes', () => { it('should render correctly with Interpolation.none and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: false }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, { command: 'L', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'L', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); it('should render correctly with Interpolation.cardinal and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: true }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, // Cardinal should create Line path segment if only one connection { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, // Cardinal should create Curve path segment for 2 or more connections { command: 'C', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'C', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); it('should render correctly with Interpolation.monotoneCubic and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: Interpolation.monotoneCubic() }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, // Monotone cubic should create Line path segment if only one connection { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, // Monotone cubic should create Curve path segment for 2 or more connections { command: 'C', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'C', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); it('should render correctly with Interpolation.simple and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: Interpolation.simple() }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, { command: 'C', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, { command: 'C', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'C', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); it('should render correctly with postponed Interpolation.step and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: Interpolation.step() }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, { command: 'L', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, { command: 'L', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, { command: 'L', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'L', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'L', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); it('should render correctly with preponed Interpolation.step and holes everywhere', async () => { data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ [ NaN, 15, 0, null, 2, 3, 4, undefined, { value: 1, meta: 'meta data' }, null ] ] }; options = { lineSmooth: Interpolation.step({ postpone: false }) }; await createChart(); chart.on('draw', context => { if (context.type === 'line') { expect( context.path.pathElements.map(pathElement => { return { command: pathElement.command, data: pathElement.data }; }) ).toEqual([ { command: 'M', data: { valueIndex: 1, value: { x: undefined, y: 15 }, meta: undefined } }, { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'L', data: { valueIndex: 2, value: { x: undefined, y: 0 }, meta: undefined } }, { command: 'M', data: { valueIndex: 4, value: { x: undefined, y: 2 }, meta: undefined } }, { command: 'L', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'L', data: { valueIndex: 5, value: { x: undefined, y: 3 }, meta: undefined } }, { command: 'L', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'L', data: { valueIndex: 6, value: { x: undefined, y: 4 }, meta: undefined } }, { command: 'M', data: { valueIndex: 8, value: { x: undefined, y: 1 }, meta: 'meta data' } } ]); } }); }); }); describe('Single value data tests', () => { beforeEach(() => { data = { labels: [1], series: [[1]] }; }); it('should render without NaN values and points', async () => { await createChart(); expect(document.querySelector('.ct-line')).toHaveAttribute( 'd', 'M50,15' ); expect(document.querySelector('.ct-point')).toHaveAttribute('x1', '50'); expect(document.querySelector('.ct-point')).toHaveAttribute( 'x2', '50.01' ); }); }); describe('Empty data tests', () => { it('should render empty grid with no data', async () => { await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); it('should render empty grid with only labels', async () => { data = { labels: [1, 2, 3, 4], series: [] }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); // Find exactly as many horizontal grid lines as labels were specified (Step Axis) expect( document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length ).toBe(data.labels?.length); }); it('should generate labels and render empty grid with only series in data', async () => { data = { series: [ [1, 2, 3, 4], [2, 3, 4], [3, 4] ] }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); // Should generate the labels using the largest series count expect( document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length ).toBe( Math.max( ...data.series.map(series => Array.isArray(series) ? series.length : 0 ) ) ); }); it('should render empty grid with no data and specified high low', async () => { data = { series: [] }; options = { width: 400, height: 300, high: 100, low: -100 }; await createChart(); // Find first and last label const labels = document.querySelectorAll( '.ct-labels .ct-label.ct-vertical' ); const firstLabel = labels[0]; const lastLabel = labels[labels.length - 1]; expect(firstLabel.textContent?.trim()).toBe('-100'); expect(lastLabel.textContent?.trim()).toBe('100'); }); it('should render empty grid with no data and reverseData option', async () => { data = { series: [] }; options = { reverseData: true }; await createChart(); // Find at least one vertical grid line expect( document.querySelector('.ct-grids .ct-grid.ct-vertical') ).toBeDefined(); }); }); describe('x1 and x2 attribute', () => { it('should contain just a datapoint', async () => { data = { series: [[{ x: 1, y: 2 }]] }; options = { fullWidth: true }; await createChart(); expect( document.querySelector('.ct-point')?.getAttribute('x1') ).not.toBe('NaN'); expect( document.querySelector('.ct-point')?.getAttribute('x2') ).not.toBe('NaN'); }); }); it('should correct apply class names', async () => { data = { labels: ['A', 'B', 'C'], series: [ { className: 'series-1', data: [1, 2, 3] }, { className: 'series-2', data: [4, 5, 6] } ] }; options = { reverseData: true }; await createChart(); const seriesElements = document.querySelectorAll('.ct-series'); expect(seriesElements[0]).toHaveClass('series-2'); expect(seriesElements[0]).toContainHTML('ct:value="6"'); expect(seriesElements[1]).toHaveClass('series-1'); expect(seriesElements[1]).toContainHTML('ct:value="3"'); }); }); }); ================================================ FILE: src/charts/LineChart/LineChart.stories.ts ================================================ import 'chartist-dev/styles'; import faker from 'faker'; import { LineChart, AutoScaleAxis, Interpolation, Svg, easings } from 'chartist-dev'; export default { title: 'LineChart', argTypes: {} }; export function Default() { const root = document.createElement('div'); new LineChart( root, { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 } } ); return root; } export function AutoScale() { const root = document.createElement('div'); new LineChart( root, { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }, { axisX: { type: AutoScaleAxis, onlyInteger: true }, axisY: { type: AutoScaleAxis, onlyInteger: true } } ); return root; } export function Labels() { const root = document.createElement('div'); new LineChart( root, { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'], series: [[5, 2, 4, 2, 0]] }, {} ); return root; } export function MultiSeries() { const root = document.createElement('div'); new LineChart( root, { labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], series: [ [5, 2, 4, 2, 0], [5, 2, 2, 0] ] }, {} ); return root; } export function Holes() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], series: [ [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], [ 10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null ], [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null], [ { x: 3, y: 3 }, { x: 4, y: 3 }, { x: 5, y: undefined }, { x: 6, y: 4 }, { x: 7, y: null }, { x: 8, y: 4 }, { x: 9, y: 4 } ] ] }, { fullWidth: true, chartPadding: { right: 10 }, low: 0 } ); return root; } export function FilledHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], series: [ [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], [ 10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null ], [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null], [ { x: 3, y: 3 }, { x: 4, y: 3 }, { x: 5, y: undefined }, { x: 6, y: 4 }, { x: 7, y: null }, { x: 8, y: 4 }, { x: 9, y: 4 } ] ] }, { fullWidth: true, chartPadding: { right: 10 }, lineSmooth: Interpolation.cardinal({ fillHoles: true }), low: 0 } ); return root; } export function OnlyWholeNumbers() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [1, 2, 3, 1, -2, 0, 1, 0], [-2, -1, -2, -1, -3, -1, -2, -1], [0, 0, 0, 1, 2, 3, 2, 1], [3, 2, 1, 0.5, 1, 0, -1, -3] ] }, { high: 3, low: -3, fullWidth: true, // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis axisY: { onlyInteger: true, offset: 20 } } ); return root; } export function NoInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: false } ); return root; } export function CardinalInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: true } ); return root; } export function MonotoneCubicInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: Interpolation.monotoneCubic() } ); return root; } export function SimpleInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: Interpolation.simple() } ); return root; } export function StepInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: Interpolation.step() } ); return root; } export function StepNoPostponeInterpolationWithHoles() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]] }, { lineSmooth: Interpolation.step({ postpone: false }) } ); return root; } export function SeriesOverrides() { const root = document.createElement('div'); new LineChart( root, { labels: ['1', '2', '3', '4', '5', '6', '7', '8'], // Naming the series with the series object array notation series: [ { name: 'series-1', data: [5, 2, -4, 2, 0, -2, 5, -3] }, { name: 'series-2', data: [4, 3, 5, 3, 1, 3, 6, 4] }, { name: 'series-3', data: [2, 4, 3, 1, 4, 5, 3, 2] } ] }, { fullWidth: true, // Within the series options you can use the series names // to specify configuration that will only be used for the // specific series. series: { 'series-1': { lineSmooth: Interpolation.step() }, 'series-2': { lineSmooth: Interpolation.simple(), showArea: true }, 'series-3': { showPoint: false } } }, [ // You can even use responsive configuration overrides to // customize your series configuration even further! [ 'screen and (max-width: 320px)', { series: { 'series-1': { lineSmooth: Interpolation.none() }, 'series-2': { lineSmooth: Interpolation.none(), showArea: false }, 'series-3': { lineSmooth: Interpolation.none(), showPoint: true } } } ] ] ); return root; } export function ReverseData() { const root = document.createElement('div'); new LineChart( root, { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }, { reverseData: true } ); return root; } export function FullWidth() { const root = document.createElement('div'); new LineChart( root, { series: [ [ { x: 1, y: 1 }, { x: 3, y: 5 } ] ] }, { fullWidth: true } ); return root; } export function Scatter() { const root = document.createElement('div'); const data = Array.from({ length: 52 }).reduce<{ labels: number[]; series: number[][]; }>( (data, _, index) => { data.labels.push(index + 1); data.series.forEach(series => { series.push(faker.datatype.number({ min: 0, max: 100 })); }); return data; }, { labels: [], series: Array.from({ length: 4 }, () => []) } ); new LineChart( root, data, { showLine: false, axisX: { labelInterpolationFnc(value, index) { return index % 13 === 0 ? 'W' + value : null; } } }, [ [ 'screen and (min-width: 640px)', { axisX: { labelInterpolationFnc(value, index) { return index % 4 === 0 ? 'W' + value : null; } } } ] ] ); return root; } export function Area() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [[5, 9, 7, 8, 5, 3, 5, 4]] }, { low: 0, showArea: true } ); return root; } export function BiPolarArea() { const root = document.createElement('div'); new LineChart( root, { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [1, 2, 3, 1, -2, 0, 1, 0], [-2, -1, -2, -1, -2.5, -1, -2, -1], [0, 0, 0, 1, 2, 2.5, 2, 1], [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5] ] }, { high: 3, low: -3, showArea: true, showLine: false, showPoint: false, fullWidth: true, axisX: { showLabel: false, showGrid: false } } ); return root; } export function CustomPoints() { const root = document.createElement('div'); new LineChart(root, { labels: [1, 2, 3, 4, 5], series: [[12, 9, 7, 8, 5]] }).on('draw', data => { // If the draw event was triggered from drawing a point on the line chart if (data.type === 'point') { // We are creating a new path SVG element that draws a triangle around the point coordinates const triangle = new Svg( 'path', { d: [ 'M', data.x, data.y - 15, 'L', data.x - 15, data.y + 8, 'L', data.x + 15, data.y + 8, 'z' ].join(' '), style: 'fill-opacity: 1' }, 'ct-area' ); // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle data.element.replace(triangle); } }); return root; } export function PathAnimation() { const root = document.createElement('div'); new LineChart( root, { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], series: [ [1, 5, 2, 5, 4, 3], [2, 3, 4, 8, 1, 2], [5, 4, 3, 2, 1, 0.5] ] }, { low: 0, showArea: true, showPoint: false, fullWidth: true } ).on('draw', data => { if ( !process.env.STORYBOOK_STORYSHOTS && (data.type === 'line' || data.type === 'area') ) { data.element.animate({ d: { begin: 2000 * data.index, dur: 2000, from: data.path .clone() .scale(1, 0) .translate(0, data.chartRect.height()) .stringify(), to: data.path.clone().stringify(), easing: easings.easeOutQuint } }); } }); return root; } export function ViewBox() { const root = document.createElement('div'); new LineChart( root, { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 }, viewBox: { width: 800, height: 400 } }, [ [ 'screen and (max-width: 575px)', { viewBox: { width: 400, height: 300 } } ] ] ); return root; } ================================================ FILE: src/charts/LineChart/LineChart.ts ================================================ import type { Axis } from '../../axes'; import type { LineChartData, LineChartOptions, LineChartOptionsWithDefaults, LineChartCreatedEvent, PointDrawEvent, LineDrawEvent, AreaDrawEvent, LineChartEventsTypes } from './LineChart.types'; import type { SegmentData, Series, SeriesObject, ResponsiveOptions } from '../../core'; import { alphaNumerate, normalizeData, serialize, getMetaData, createSvg, createChartRect, createGridBackground } from '../../core'; import { isNumeric, noop, extend, safeHasProperty, each } from '../../utils'; import { StepAxis, AutoScaleAxis, axisUnits } from '../../axes'; import { monotoneCubic, none } from '../../interpolation'; import { BaseChart } from './../BaseChart'; export function getSeriesOption< T extends keyof Omit >( series: Series | SeriesObject, options: LineChartOptionsWithDefaults, key: T ) { if ( safeHasProperty(series, 'name') && series.name && options.series?.[series.name] ) { const seriesOptions = options?.series[series.name]; const value = seriesOptions[key]; const result = value === undefined ? options[key] : value; return result as LineChartOptionsWithDefaults[T]; } else { return options[key]; } } /** * Default options in line charts. Expand the code view to see a detailed list of options with comments. */ const defaultOptions = { // Options for X-Axis axisX: { // The offset of the labels to the chart area offset: 30, // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis. position: 'end' as const, // Allows you to correct label positioning on this axis by positive or negative x and y offset. labelOffset: { x: 0, y: 0 }, // If labels should be shown or not showLabel: true, // If the axis grid should be drawn or not showGrid: true, // Interpolation function that allows you to intercept the value from the axis label labelInterpolationFnc: noop, // Set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here. type: undefined }, // Options for Y-Axis axisY: { // The offset of the labels to the chart area offset: 40, // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis. position: 'start' as const, // Allows you to correct label positioning on this axis by positive or negative x and y offset. labelOffset: { x: 0, y: 0 }, // If labels should be shown or not showLabel: true, // If the axis grid should be drawn or not showGrid: true, // Interpolation function that allows you to intercept the value from the axis label labelInterpolationFnc: noop, // Set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here. type: undefined, // This value specifies the minimum height in pixel of the scale steps scaleMinSpace: 20, // Use only integer values (whole numbers) for the scale steps onlyInteger: false }, // Specify a fixed width for the chart as a string (i.e. '100px' or '50%') width: undefined, // Specify a fixed height for the chart as a string (i.e. '100px' or '50%') height: undefined, // If the line should be drawn or not showLine: true, // If dots should be drawn or not showPoint: true, // If the line chart should draw an area showArea: false, // The base for the area chart that will be used to close the area shape (is normally 0) areaBase: 0, // Specify if the lines should be smoothed. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description. lineSmooth: true, // If the line chart should add a background fill to the .ct-grids group. showGridBackground: false, // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value low: undefined, // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value high: undefined, // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5} chartPadding: { top: 15, right: 15, bottom: 5, left: 10 }, // When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler. fullWidth: false, // If true the whole data is reversed including labels, the series order as well as the whole series data arrays. reverseData: false, // Override the class names that get used to generate the SVG structure of the chart classNames: { chart: 'ct-chart-line', label: 'ct-label', labelGroup: 'ct-labels', series: 'ct-series', line: 'ct-line', point: 'ct-point', area: 'ct-area', grid: 'ct-grid', gridGroup: 'ct-grids', gridBackground: 'ct-grid-background', vertical: 'ct-vertical', horizontal: 'ct-horizontal', start: 'ct-start', end: 'ct-end' } }; export class LineChart extends BaseChart { /** * This method creates a new line chart. * @param query A selector query string or directly a DOM element * @param data The data object that needs to consist of a labels and a series array * @param options The options object with options that override the default options. Check the examples for a detailed list. * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]] * @return An object which exposes the API for the created chart * * @example * ```ts * // Create a simple line chart * const data = { * // A labels array that can contain any sort of values * labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], * // Our series array that contains series objects or in this case series data arrays * series: [ * [5, 2, 4, 2, 0] * ] * }; * * // As options we currently only set a static size of 300x200 px * const options = { * width: '300px', * height: '200px' * }; * * // In the global name space Chartist we call the Line function to initialize a line chart. As a first parameter we pass in a selector where we would like to get our chart created. Second parameter is the actual data object and as a third parameter we pass in our options * new LineChart('.ct-chart', data, options); * ``` * * @example * ```ts * // Use specific interpolation function with configuration from the Chartist.Interpolation module * * const chart = new LineChart('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [ * [1, 1, 8, 1, 7] * ] * }, { * lineSmooth: Chartist.Interpolation.cardinal({ * tension: 0.2 * }) * }); * ``` * * @example * ```ts * // Create a line chart with responsive options * * const data = { * // A labels array that can contain any sort of values * labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], * // Our series array that contains series objects or in this case series data arrays * series: [ * [5, 2, 4, 2, 0] * ] * }; * * // In addition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries. * const responsiveOptions = [ * ['screen and (min-width: 641px) and (max-width: 1024px)', { * showPoint: false, * axisX: { * labelInterpolationFnc: function(value) { * // Will return Mon, Tue, Wed etc. on medium screens * return value.slice(0, 3); * } * } * }], * ['screen and (max-width: 640px)', { * showLine: false, * axisX: { * labelInterpolationFnc: function(value) { * // Will return M, T, W etc. on small screens * return value[0]; * } * } * }] * ]; * * new LineChart('.ct-chart', data, null, responsiveOptions); * ``` */ constructor( query: string | Element | null, protected override data: LineChartData, options?: LineChartOptions, responsiveOptions?: ResponsiveOptions ) { super( query, data, defaultOptions, extend({}, defaultOptions, options), responsiveOptions ); } /** * Creates a new chart */ createChart(options: LineChartOptionsWithDefaults) { const { data } = this; const normalizedData = normalizeData(data, options.reverseData, true); // Create new svg object const svg = createSvg( this.container, options.width, options.height, options.classNames.chart, options.viewBox ); this.svg = svg; // Create groups for labels, grid and series const gridGroup = svg.elem('g').addClass(options.classNames.gridGroup); const seriesGroup = svg.elem('g'); const labelGroup = svg.elem('g').addClass(options.classNames.labelGroup); const chartRect = createChartRect(svg, options); let axisX: Axis; let axisY: Axis; if (options.axisX.type === undefined) { axisX = new StepAxis(axisUnits.x, normalizedData.series, chartRect, { ...options.axisX, ticks: normalizedData.labels, stretch: options.fullWidth }); } else { // eslint-disable-next-line new-cap axisX = new options.axisX.type( axisUnits.x, normalizedData.series, chartRect, options.axisX ); } if (options.axisY.type === undefined) { axisY = new AutoScaleAxis(axisUnits.y, normalizedData.series, chartRect, { ...options.axisY, high: isNumeric(options.high) ? options.high : options.axisY.high, low: isNumeric(options.low) ? options.low : options.axisY.low }); } else { // eslint-disable-next-line new-cap axisY = new options.axisY.type( axisUnits.y, normalizedData.series, chartRect, options.axisY ); } axisX.createGridAndLabels( gridGroup, labelGroup, options, this.eventEmitter ); axisY.createGridAndLabels( gridGroup, labelGroup, options, this.eventEmitter ); if (options.showGridBackground) { createGridBackground( gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter ); } // Draw the series each( data.series, (series, seriesIndex) => { const seriesElement = seriesGroup.elem('g'); const seriesName = safeHasProperty(series, 'name') && series.name; const seriesClassName = safeHasProperty(series, 'className') && series.className; const seriesMeta = safeHasProperty(series, 'meta') ? series.meta : undefined; // Write attributes to series group element. If series name or meta is undefined the attributes will not be written if (seriesName) { seriesElement.attr({ 'ct:series-name': seriesName }); } if (seriesMeta) { seriesElement.attr({ 'ct:meta': serialize(seriesMeta) }); } // Use series class from series data or if not set generate one seriesElement.addClass( [ options.classNames.series, seriesClassName || `${options.classNames.series}-${alphaNumerate(seriesIndex)}` ].join(' ') ); const pathCoordinates: number[] = []; const pathData: SegmentData[] = []; normalizedData.series[seriesIndex].forEach((value, valueIndex) => { const p = { x: chartRect.x1 + axisX.projectValue( value, valueIndex, normalizedData.series[seriesIndex] ), y: chartRect.y1 - axisY.projectValue( value, valueIndex, normalizedData.series[seriesIndex] ) }; pathCoordinates.push(p.x, p.y); pathData.push({ value, valueIndex, meta: getMetaData(series, valueIndex) }); }); const seriesOptions = { lineSmooth: getSeriesOption(series, options, 'lineSmooth'), showPoint: getSeriesOption(series, options, 'showPoint'), showLine: getSeriesOption(series, options, 'showLine'), showArea: getSeriesOption(series, options, 'showArea'), areaBase: getSeriesOption(series, options, 'areaBase') }; let smoothing; if (typeof seriesOptions.lineSmooth === 'function') { smoothing = seriesOptions.lineSmooth; } else { smoothing = seriesOptions.lineSmooth ? monotoneCubic() : none(); } // Interpolating path where pathData will be used to annotate each path element so we can trace back the original // index, value and meta data const path = smoothing(pathCoordinates, pathData); // If we should show points we need to create them now to avoid secondary loop // Points are drawn from the pathElements returned by the interpolation function // Small offset for Firefox to render squares correctly if (seriesOptions.showPoint) { path.pathElements.forEach(pathElement => { const { data: pathElementData } = pathElement; const point = seriesElement.elem( 'line', { x1: pathElement.x, y1: pathElement.y, x2: pathElement.x + 0.01, y2: pathElement.y }, options.classNames.point ); if (pathElementData) { let x: number | undefined; let y: number | undefined; if (safeHasProperty(pathElementData.value, 'x')) { x = pathElementData.value.x; } if (safeHasProperty(pathElementData.value, 'y')) { y = pathElementData.value.y; } point.attr({ 'ct:value': [x, y].filter(isNumeric).join(','), 'ct:meta': serialize(pathElementData.meta) }); } this.eventEmitter.emit('draw', { type: 'point', value: pathElementData?.value, index: pathElementData?.valueIndex || 0, meta: pathElementData?.meta, series, seriesIndex, axisX, axisY, group: seriesElement, element: point, x: pathElement.x, y: pathElement.y, chartRect }); }); } if (seriesOptions.showLine) { const line = seriesElement.elem( 'path', { d: path.stringify() }, options.classNames.line, true ); this.eventEmitter.emit('draw', { type: 'line', values: normalizedData.series[seriesIndex], path: path.clone(), chartRect, // TODO: Remove redundant index: seriesIndex, series, seriesIndex, meta: seriesMeta, axisX, axisY, group: seriesElement, element: line }); } // Area currently only works with axes that support a range! if (seriesOptions.showArea && axisY.range) { // If areaBase is outside the chart area (< min or > max) we need to set it respectively so that // the area is not drawn outside the chart area. const areaBase = Math.max( Math.min(seriesOptions.areaBase, axisY.range.max), axisY.range.min ); // We project the areaBase value into screen coordinates const areaBaseProjected = chartRect.y1 - axisY.projectValue(areaBase); // In order to form the area we'll first split the path by move commands so we can chunk it up into segments path .splitByCommand('M') // We filter only "solid" segments that contain more than one point. Otherwise there's no need for an area .filter(pathSegment => pathSegment.pathElements.length > 1) .map(solidPathSegments => { // Receiving the filtered solid path segments we can now convert those segments into fill areas const firstElement = solidPathSegments.pathElements[0]; const lastElement = solidPathSegments.pathElements[ solidPathSegments.pathElements.length - 1 ]; // Cloning the solid path segment with closing option and removing the first move command from the clone // We then insert a new move that should start at the area base and draw a straight line up or down // at the end of the path we add an additional straight line to the projected area base value // As the closing option is set our path will be automatically closed return solidPathSegments .clone(true) .position(0) .remove(1) .move(firstElement.x, areaBaseProjected) .line(firstElement.x, firstElement.y) .position(solidPathSegments.pathElements.length + 1) .line(lastElement.x, areaBaseProjected); }) .forEach(areaPath => { // For each of our newly created area paths, we'll now create path elements by stringifying our path objects // and adding the created DOM elements to the correct series group const area = seriesElement.elem( 'path', { d: areaPath.stringify() }, options.classNames.area, true ); // Emit an event for each area that was drawn this.eventEmitter.emit('draw', { type: 'area', values: normalizedData.series[seriesIndex], path: areaPath.clone(), series, seriesIndex, axisX, axisY, chartRect, // TODO: Remove redundant index: seriesIndex, group: seriesElement, element: area, meta: seriesMeta }); }); } }, options.reverseData ); this.eventEmitter.emit('created', { chartRect, axisX, axisY, svg, options }); } } ================================================ FILE: src/charts/LineChart/LineChart.types.ts ================================================ import type { Options, AxisOptions, Data, Series, SeriesObject, SegmentData, CreatedEvent, DrawEvent, NormalizedSeriesValue, NormalizedSeries, AxesDrawEvent } from '../../core'; import type { SvgPath } from '../../svg'; import type { RequiredKeys } from '../../utils'; import type { BaseChartEventsTypes } from '../types'; export type LineInterpolation = ( pathCoordinates: number[], valueData: SegmentData[] ) => SvgPath; export type LineChartData = Data<(Series | SeriesObject)[]>; export interface LineChartOptions< TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions > extends Options { /** * Override the class names that get used to generate the SVG structure of the chart */ classNames?: { chart?: string; label?: string; labelGroup?: string; series?: string; line?: string; point?: string; area?: string; grid?: string; gridGroup?: string; gridBackground?: string; vertical?: string; horizontal?: string; start?: string; end?: string; }; /** * If the line should be drawn or not */ showLine?: boolean; /** * If dots should be drawn or not */ showPoint?: boolean; /** * If the line chart should draw an area */ showArea?: boolean; /** * The base for the area chart that will be used to close the area shape (is normally 0) */ areaBase?: number; /** * Specify if the lines should be smoothed. * This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. * You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. * Check the examples for a brief description. */ lineSmooth?: boolean | LineInterpolation; /** * If the line chart should add a background fill to the .ct-grids group. */ showGridBackground?: boolean; /** * When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler. */ fullWidth?: boolean; /** * If true the whole data is reversed including labels, the series order as well as the whole series data arrays. */ reverseData?: boolean; series?: Record< string, Omit, 'series'> >; } export type LineChartOptionsWithDefaults = RequiredKeys< LineChartOptions< RequiredKeys< AxisOptions, | 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' >, RequiredKeys< AxisOptions, | 'offset' | 'position' | 'labelOffset' | 'showLabel' | 'showGrid' | 'labelInterpolationFnc' | 'scaleMinSpace' > >, | 'showLine' | 'showPoint' | 'areaBase' | 'lineSmooth' | 'chartPadding' | 'axisX' | 'axisY', 'classNames' >; export type LineChartCreatedEvent = CreatedEvent; export interface PointDrawEvent extends DrawEvent { type: 'point'; value: NormalizedSeriesValue; x: number; y: number; } export interface LineDrawEvent extends DrawEvent { type: 'line'; values: NormalizedSeries; path: SvgPath; } export interface AreaDrawEvent extends DrawEvent { type: 'area'; values: NormalizedSeries; path: SvgPath; } export type LineChartEventsTypes = BaseChartEventsTypes< LineChartCreatedEvent, AxesDrawEvent | PointDrawEvent | LineDrawEvent | AreaDrawEvent >; ================================================ FILE: src/charts/LineChart/index.ts ================================================ export * from './LineChart'; export * from './LineChart.types'; ================================================ FILE: src/charts/PieChart/PieChart.spec.ts ================================================ import { namespaces, deserialize } from '../../core'; import { PieChartOptions, PieChartData, PieChart } from '.'; import { Fixture, addMockWrapper, destroyMockDom, mockDom } from '../../../test/mock/dom'; describe('Charts', () => { describe('PieChart', () => { let fixture: Fixture; let chart: PieChart; let options: PieChartOptions; let data: PieChartData; function createChart() { return new Promise(resolve => { fixture = addMockWrapper( '
' ); const { wrapper } = fixture; chart = new PieChart( wrapper.querySelector('.ct-chart'), data, options ).on('created', () => { resolve(); chart.off('created'); }); }); } beforeEach(() => { mockDom(); }); afterEach(() => { destroyMockDom(); data = { series: [] }; options = {}; }); describe('Meta data tests', () => { it('should render meta data correctly on slice with mixed value array', async () => { const fixture = addMockWrapper( '
' ); const meta = { test: 'Serialized Test' }; const data = { labels: ['A', 'B', 'C'], series: [ 5, { value: 8, meta: meta }, 1 ] }; const chartContainer = fixture.wrapper.querySelector('.ct-chart'); const chart = new PieChart(chartContainer, data); chart.on('created', () => { const metaAttribute = chartContainer ?.querySelectorAll('.ct-slice-pie')[1] .getAttributeNS(namespaces.ct, 'meta'); expect(deserialize(metaAttribute)).toEqual(meta); chart.off('created'); }); }); }); describe('Simple Pie Chart', () => { const num = '\\d+(\\.\\d*)?'; const sum = (a: number, b: number) => a + b; beforeEach(() => { const series = [5, 3, 4]; data = { series }; options = { width: 100, height: 100, chartPadding: 10, labelInterpolationFnc: value => `${Math.round((Number(value) / series.reduce(sum)) * 100)}%` }; }); it('should render three slices', async () => { await createChart(); expect(fixture.wrapper.querySelectorAll('.ct-slice-pie').length).toBe( 3 ); }); it('should set value attribute', async () => { await createChart(); const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie'); expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('5'); expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('3'); expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('4'); }); it('should create slice path', async () => { await createChart(); Array.from(fixture.wrapper.querySelectorAll('.ct-slice-pie')).forEach( element => { const pattern = new RegExp( `M${num},${num}A40,40,0,0,0,${num},${num}L50,50Z$` ); const path = element.getAttribute('d'); expect(path).toMatch(pattern); } ); }); it('should add labels', async () => { await createChart(); const labels = fixture.wrapper.querySelectorAll('.ct-label'); expect(labels[0]).toHaveTextContent('42%'); expect(labels[1]).toHaveTextContent('25%'); expect(labels[2]).toHaveTextContent('33%'); }); it('should overlap slices', async () => { data = { series: [1, 1] }; await createChart(); const [slice1, slice2] = Array.from( fixture.wrapper.querySelectorAll('.ct-slice-pie') ); expect(slice1).toHaveAttribute( 'd', expect.stringMatching(/^M50,90A40,40,0,0,0,50,10L50,50Z/) ); expect(slice2).toHaveAttribute( 'd', expect.stringMatching(/^M50,10A40,40,0,0,0,50.\d+,90L50,50Z/) ); }); it('should set large arc sweep flag', async () => { data = { series: [1, 2] }; await createChart(); const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[1]; expect(slice).toHaveAttribute( 'd', expect.stringMatching(/^M50,10A40,40,0,1,0/) ); }); it('should draw complete circle with gap', async () => { data = { series: [1] }; await createChart(); const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[0]; expect(slice).toHaveAttribute( 'd', expect.stringMatching(/^M49.9\d+,10A40,40,0,1,0,50,10L50,50Z/) ); }); it('should draw complete circle with startAngle', async () => { data.series = [100]; options.startAngle = 90; await createChart(); const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[0]; expect(slice).toHaveAttribute( 'd', expect.stringMatching(/^M90,49.9\d+A40,40,0,1,0,90,50L50,50Z/) ); }); it('should draw complete circle if values are 0', async () => { data = { series: [0, 1, 0] }; await createChart(); const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[1]; expect(slice).toHaveAttribute( 'd', expect.stringMatching(/^M49.9\d+,10A40,40,0,1,0,50,10L50,50Z/) ); }); }); describe('Pie with small slices', () => { beforeEach(() => { data = { series: [0.001, 2] }; options = { width: 100, height: 100, chartPadding: 0 }; }); it('should render correctly with very small slices', async () => { await createChart(); const [slice1, slice2] = Array.from( fixture.wrapper.querySelectorAll('.ct-slice-pie') ); expect(slice1).toHaveAttribute( 'd', expect.stringMatching(/^M50.1\d+,0A50,50,0,0,0,50,0/) ); expect(slice2).toHaveAttribute( 'd', expect.stringMatching(/^M49.9\d*,0A50,50,0,1,0,50,0/) ); }); it('should render correctly with very small slices on startAngle', async () => { options.startAngle = 90; await createChart(); const [slice1, slice2] = Array.from( fixture.wrapper.querySelectorAll('.ct-slice-pie') ); expect(slice1).toHaveAttribute( 'd', expect.stringMatching(/^M100,50.1\d*A50,50,0,0,0,100,50/) ); expect(slice2).toHaveAttribute( 'd', expect.stringMatching(/^M100,49.97\d*A50,50,0,1,0,100,49.98\d*/) ); }); it('should render correctly with very small slices', async () => { options.donut = true; await createChart(); const [slice1, slice2] = Array.from( fixture.wrapper.querySelectorAll('.ct-slice-donut') ); expect(slice1).toHaveAttribute( 'd', expect.stringMatching(/^M50.\d+,30A20,20,0,0,0,50,30/) ); expect(slice2).toHaveAttribute( 'd', expect.stringMatching(/^M49.9\d*,30A20,20,0,1,0,50,30/) ); }); }); describe('Pie with empty values', () => { beforeEach(() => { data = { series: [1, 2, 0, 4] }; options = { width: 100, height: 100, ignoreEmptyValues: true }; }); it('should not render empty slices', async () => { await createChart(); const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie'); expect(slices.length).toBe(3); expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('1'); expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('2'); expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('4'); }); it('should render without NaN values and points', async () => { data = { series: [0, 0, 0] }; options = { width: 400, height: 400 }; await createChart(); const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie'); expect(slices.length).toBe(3); expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('0'); expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('0'); expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('0'); expect(slices[0]).toHaveAttribute( 'd', 'M200,5A195,195,0,0,0,200,5L200,200Z' ); expect(slices[1]).toHaveAttribute( 'd', 'M200,5A195,195,0,0,0,200,5L200,200Z' ); expect(slices[2]).toHaveAttribute( 'd', 'M200,5A195,195,0,0,0,200,5L200,200Z' ); }); it('should render empty slices', async () => { data = { series: [1, 2, 0, 4] }; options = { width: 100, height: 100, ignoreEmptyValues: false }; await createChart(); const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie'); expect(slices.length).toBe(4); expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('1'); expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('2'); expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('0'); expect(slices[3].getAttributeNS(namespaces.ct, 'value')).toBe('4'); }); }); describe('Gauge Chart', () => { beforeEach(() => { data = { series: [20, 10, 30, 40] }; options = { chartPadding: 50, height: 500, width: 500, donut: true, donutWidth: 60, startAngle: 270, total: 200, showLabel: false }; }); it('should render four strokes', async () => { await createChart(); expect(fixture.wrapper.querySelectorAll('.ct-slice-donut').length).toBe( 4 ); }); it('should set value attribute', async () => { await createChart(); const slices = fixture.wrapper.querySelectorAll('.ct-slice-donut'); expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('20'); expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('10'); expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('30'); expect(slices[3].getAttributeNS(namespaces.ct, 'value')).toBe('40'); }); it('should create slice path', async () => { const num = '\\d+(\\.\\d*)?'; const pattern = new RegExp( `^M${num},${num}A170,170,0,0,0,${num},${num}$` ); await createChart(); Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach( element => expect(element).toHaveAttribute('d', expect.stringMatching(pattern)) ); }); it('should set stroke-width', async () => { const strokeWidth = new RegExp('stroke-width:\\s*60px'); await createChart(); Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach( element => expect(element).toHaveAttribute( // eslint-disable-next-line jest-dom/prefer-to-have-style 'style', expect.stringMatching(strokeWidth) ) ); }); it('should not add labels', async () => { await createChart(); const labels = fixture.wrapper.querySelectorAll('.ct-label'); expect(labels.length).toBe(0); }); }); describe('Pie Chart with relative donutWidth', () => { beforeEach(() => { data = { series: [20, 10, 30, 40] }; options = { chartPadding: 50, height: 500, width: 500, donut: true, donutWidth: '25%', showLabel: false }; }); it('should render four strokes', async () => { await createChart(); expect(fixture.wrapper.querySelectorAll('.ct-slice-donut').length).toBe( 4 ); }); it('should create slice path', async () => { const num = '\\d+(\\.\\d*)?'; const pattern = new RegExp( `^M${num},${num}A175,175,0,0,0,${num},${num}$` ); await createChart(); Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach( element => expect(element).toHaveAttribute('d', expect.stringMatching(pattern)) ); }); it('should set stroke-width', async () => { const strokeWidth = new RegExp('stroke-width:\\s?50px'); await createChart(); Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach( element => expect(element).toHaveAttribute( // eslint-disable-next-line jest-dom/prefer-to-have-style 'style', expect.stringMatching(strokeWidth) ) ); }); }); }); }); ================================================ FILE: src/charts/PieChart/PieChart.stories.ts ================================================ import 'chartist-dev/styles'; import { PieChart } from 'chartist-dev'; export default { title: 'PieChart', argTypes: {} }; export function Default() { const root = document.createElement('div'); new PieChart( root, { series: [5, 3, 4] }, { width: 100, height: 100, chartPadding: 10 } ); return root; } export function Labels() { const root = document.createElement('div'); new PieChart( root, { labels: ['A', 'B', 'C'], series: [5, 8, 1] }, {} ); return root; } export function OverlappingLabels() { const root = document.createElement('div'); new PieChart( root, { labels: ['Big Slice', 11231231, 'Test the string', new Date(), 124124124], series: [96, 1, 1, 1, 1] }, { preventOverlappingLabelOffset: 12 } ); return root; } export function LabelInterpolation() { const root = document.createElement('div'); const data = { series: [5, 3, 4] }; const sum = (a: number, b: number) => a + b; new PieChart(root, data, { width: 100, height: 100, chartPadding: 10, labelInterpolationFnc: value => `${Math.round((Number(value) / data.series.reduce(sum)) * 100)}%` }); return root; } export function StartAngle() { const root = document.createElement('div'); new PieChart( root, { series: [5, 3, 4] }, { startAngle: 90 } ); return root; } export function SmallSlices() { const root = document.createElement('div'); new PieChart( root, { series: [0.001, 2] }, { width: 100, height: 100, chartPadding: 0 } ); return root; } export function IgnoreEmptyValues() { const root = document.createElement('div'); new PieChart( root, { series: [1, 2, 0, 4] }, { ignoreEmptyValues: true } ); return root; } export function Donut() { const root = document.createElement('div'); new PieChart( root, { series: [5, 3, 4] }, { donut: true } ); return root; } export function GaugeDonut() { const root = document.createElement('div'); new PieChart( root, { series: [20, 10, 30, 40] }, { chartPadding: 50, height: 500, width: 500, donut: true, donutWidth: 60, startAngle: 270, total: 200, showLabel: false } ); return root; } export function RelativeDonutWidth() { const root = document.createElement('div'); new PieChart( root, { series: [20, 10, 30, 40] }, { chartPadding: 50, height: 500, width: 500, donut: true, donutWidth: '25%', showLabel: false } ); return root; } export function Solid() { const root = document.createElement('div'); new PieChart( root, { series: [20, 10, 30, 40] }, { donut: true, donutWidth: 60, // donutSolid: true, startAngle: 270, showLabel: true } ); return root; } export function ViewBox() { const root = document.createElement('div'); new PieChart( root, { series: [5, 3, 4] }, { chartPadding: 10, viewBox: { width: 350, height: 350 } }, [ [ 'screen and (max-width: 575px)', { viewBox: { width: 250, height: 250 } } ] ] ); return root; } ================================================ FILE: src/charts/PieChart/PieChart.ts ================================================ import type { LabelDirection, AnchorPosition, Dot, PieChartData, PieChartOptions, PieChartOptionsWithDefaults, PieChartCreatedEvent, SliceDrawEvent, SliceLabelDrawEvent, PieChartEventsTypes } from './PieChart.types'; import type { Svg } from '../../svg'; import type { ResponsiveOptions } from '../../core'; import { alphaNumerate, quantity, normalizeData, serialize, createSvg, createChartRect, polarToCartesian } from '../../core'; import { noop, sum, extend, isFalseyButZero, safeHasProperty } from '../../utils'; import { SvgPath } from '../../svg'; import { BaseChart } from '../BaseChart'; /** * Default options in line charts. Expand the code view to see a detailed list of options with comments. */ const defaultOptions = { // Specify a fixed width for the chart as a string (i.e. '100px' or '50%') width: undefined, // Specify a fixed height for the chart as a string (i.e. '100px' or '50%') height: undefined, // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5} chartPadding: 5, // Override the class names that are used to generate the SVG structure of the chart classNames: { chartPie: 'ct-chart-pie', chartDonut: 'ct-chart-donut', series: 'ct-series', slicePie: 'ct-slice-pie', sliceDonut: 'ct-slice-donut', label: 'ct-label' }, // The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise. startAngle: 0, // An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts. total: undefined, // If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices. donut: false, // Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future. // This option can be set as number or string to specify a relative width (i.e. 100 or '30%'). donutWidth: 60, // If a label should be shown or not showLabel: true, // Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center. labelOffset: 0, // This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option. labelPosition: 'inside', // An interpolation function for the label value labelInterpolationFnc: noop, // Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center. labelDirection: 'neutral', // If true empty values will be ignored to avoid drawing unnecessary slices and labels ignoreEmptyValues: false, // If Nonzero check if a label has overlapping text then move it the number of pixels up and left (Should be half of label font size + 1 but you can tweak it as you prefer) preventOverlappingLabelOffset: 0 }; /** * Determines SVG anchor position based on direction and center parameter */ export function determineAnchorPosition( center: Dot, label: Dot, direction: LabelDirection ): AnchorPosition { const toTheRight = label.x > center.x; if ( (toTheRight && direction === 'explode') || (!toTheRight && direction === 'implode') ) { return 'start'; } else if ( (toTheRight && direction === 'implode') || (!toTheRight && direction === 'explode') ) { return 'end'; } else { return 'middle'; } } export class PieChart extends BaseChart { /** * This method creates a new pie chart and returns an object that can be used to redraw the chart. * @param query A selector query string or directly a DOM element * @param data The data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage. The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group. * @param options The options object with options that override the default options. Check the examples for a detailed list. * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]] * * @example * ```ts * // Simple pie chart example with four series * new PieChart('.ct-chart', { * series: [10, 2, 4, 3] * }); * ``` * * @example * ```ts * // Drawing a donut chart * new PieChart('.ct-chart', { * series: [10, 2, 4, 3] * }, { * donut: true * }); * ``` * * @example * ```ts * // Using donut, startAngle and total to draw a gauge chart * new PieChart('.ct-chart', { * series: [20, 10, 30, 40] * }, { * donut: true, * donutWidth: 20, * startAngle: 270, * total: 200 * }); * ``` * * @example * ```ts * // Drawing a pie chart with padding and labels that are outside the pie * new PieChart('.ct-chart', { * series: [20, 10, 30, 40] * }, { * chartPadding: 30, * labelOffset: 50, * labelDirection: 'explode' * }); * ``` * * @example * ```ts * // Overriding the class names for individual series as well as a name and meta data. * // The name will be written as ct:series-name attribute and the meta data will be serialized and written * // to a ct:meta attribute. * new PieChart('.ct-chart', { * series: [{ * value: 20, * name: 'Series 1', * className: 'my-custom-class-one', * meta: 'Meta One' * }, { * value: 10, * name: 'Series 2', * className: 'my-custom-class-two', * meta: 'Meta Two' * }, { * value: 70, * name: 'Series 3', * className: 'my-custom-class-three', * meta: 'Meta Three' * }] * }); * ``` */ constructor( query: string | Element | null, protected override data: PieChartData, options?: PieChartOptions, responsiveOptions?: ResponsiveOptions ) { super( query, data, defaultOptions, extend({}, defaultOptions, options), responsiveOptions ); } /** * Check if a label has overlapping text then move it the number of pixels up and left based on textSize. * @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions. * @param existingLabelPos - Label position that has already been placed that chartist will check against. * @param textOffset - this is configured with preventOverlappingLabelOffset option. * @param length - How many characters long the label is. */ moveLabel( labelPos: Dot, existingLabelPos: Dot, textOffset: number, length: number ) { if ( labelPos.y > existingLabelPos.y - textOffset && labelPos.y < existingLabelPos.y + textOffset && labelPos.x > existingLabelPos.x - length * textOffset && labelPos.x < existingLabelPos.x + length * textOffset ) { labelPos.y -= textOffset; labelPos.x -= textOffset; this.moveLabel(labelPos, existingLabelPos, textOffset, length); } } /** * Creates the pie chart * * @param options */ createChart(options: PieChartOptionsWithDefaults) { const { data } = this; const normalizedData = normalizeData(data); const seriesGroups: Svg[] = []; let labelsGroup: Svg; const labelPositions: Dot[] = []; let labelRadius: number; let startAngle = options.startAngle; // Create SVG.js draw const svg = createSvg( this.container, options.width, options.height, options.donut ? options.classNames.chartDonut : options.classNames.chartPie, options.viewBox ); this.svg = svg; // Calculate charting rect const chartRect = createChartRect(svg, options); // Get biggest circle radius possible within chartRect let radius = Math.min(chartRect.width() / 2, chartRect.height() / 2); // Calculate total of all series to get reference value or use total reference from optional options const totalDataSum = options.total || normalizedData.series.reduce(sum, 0); const donutWidth = quantity(options.donutWidth); if (donutWidth.unit === '%') { donutWidth.value *= radius / 100; } // If this is a donut chart we need to adjust our radius to enable strokes to be drawn inside // Unfortunately this is not possible with the current SVG Spec // See this proposal for more details: http://lists.w3.org/Archives/Public/www-svg/2003Oct/0000.html radius -= options.donut ? donutWidth.value / 2 : 0; // If labelPosition is set to `outside` or a donut chart is drawn then the label position is at the radius, // if regular pie chart it's half of the radius if (options.labelPosition === 'outside' || options.donut) { labelRadius = radius; } else if (options.labelPosition === 'center') { // If labelPosition is center we start with 0 and will later wait for the labelOffset labelRadius = 0; } else { // Default option is 'inside' where we use half the radius so the label will be placed in the center of the pie // slice labelRadius = radius / 2; } // Add the offset to the labelRadius where a negative offset means closed to the center of the chart if (options.labelOffset) { labelRadius += options.labelOffset; } // Calculate end angle based on total sum and current data value and offset with padding const center = { x: chartRect.x1 + chartRect.width() / 2, y: chartRect.y2 + chartRect.height() / 2 }; // Check if there is only one non-zero value in the series array. const hasSingleValInSeries = data.series.filter(val => safeHasProperty(val, 'value') ? val.value !== 0 : val !== 0 ).length === 1; // Creating the series groups data.series.forEach((_, index) => (seriesGroups[index] = svg.elem('g'))); // if we need to show labels we create the label group now if (options.showLabel) { labelsGroup = svg.elem('g'); } // Draw the series // initialize series groups data.series.forEach((series, index) => { // If current value is zero and we are ignoring empty values then skip to next value if (normalizedData.series[index] === 0 && options.ignoreEmptyValues) { return; } const seriesName = safeHasProperty(series, 'name') && series.name; const seriesClassName = safeHasProperty(series, 'className') && series.className; const seriesMeta = safeHasProperty(series, 'meta') ? series.meta : undefined; // If the series is an object and contains a name or meta data we add a custom attribute if (seriesName) { seriesGroups[index].attr({ 'ct:series-name': seriesName }); } // Use series class from series data or if not set generate one seriesGroups[index].addClass( [ options.classNames?.series, seriesClassName || `${options.classNames?.series}-${alphaNumerate(index)}` ].join(' ') ); // If the whole dataset is 0 endAngle should be zero. Can't divide by 0. let endAngle = totalDataSum > 0 ? startAngle + (normalizedData.series[index] / totalDataSum) * 360 : 0; // Use slight offset so there are no transparent hairline issues const overlappigStartAngle = Math.max( 0, startAngle - (index === 0 || hasSingleValInSeries ? 0 : 0.2) ); // If we need to draw the arc for all 360 degrees we need to add a hack where we close the circle // with Z and use 359.99 degrees if (endAngle - overlappigStartAngle >= 359.99) { endAngle = overlappigStartAngle + 359.99; } const start = polarToCartesian( center.x, center.y, radius, overlappigStartAngle ); const end = polarToCartesian(center.x, center.y, radius, endAngle); // Create a new path element for the pie chart. If this isn't a donut chart we should close the path for a correct stroke const path = new SvgPath(!options.donut) .move(end.x, end.y) .arc( radius, radius, 0, Number(endAngle - startAngle > 180), 0, start.x, start.y ); // If regular pie chart (no donut) we add a line to the center of the circle for completing the pie if (!options.donut) { path.line(center.x, center.y); } // Create the SVG path // If this is a donut chart we add the donut class, otherwise just a regular slice const pathElement = seriesGroups[index].elem( 'path', { d: path.stringify() }, options.donut ? options.classNames.sliceDonut : options.classNames.slicePie ); // Adding the pie series value to the path pathElement.attr({ 'ct:value': normalizedData.series[index], 'ct:meta': serialize(seriesMeta) }); // If this is a donut, we add the stroke-width as style attribute if (options.donut) { pathElement.attr({ style: 'stroke-width: ' + donutWidth.value + 'px' }); } // Fire off draw event this.eventEmitter.emit('draw', { type: 'slice', value: normalizedData.series[index], totalDataSum: totalDataSum, index, meta: seriesMeta, series, group: seriesGroups[index], element: pathElement, path: path.clone(), center, radius, startAngle, endAngle, chartRect }); // If we need to show labels we need to add the label for this slice now if (options.showLabel) { let labelPosition: Dot; if (data.series.length === 1) { // If we have only 1 series, we can position the label in the center of the pie labelPosition = { x: center.x, y: center.y }; } else { // Position at the labelRadius distance from center and between start and end angle labelPosition = polarToCartesian( center.x, center.y, labelRadius, startAngle + (endAngle - startAngle) / 2 ); } let rawValue; if ( normalizedData.labels && !isFalseyButZero(normalizedData.labels[index]) ) { rawValue = normalizedData.labels[index]; } else { rawValue = normalizedData.series[index]; } const interpolatedValue = options.labelInterpolationFnc( rawValue, index ); if (interpolatedValue || interpolatedValue === 0) { if (options.preventOverlappingLabelOffset) { const textOffset = options.preventOverlappingLabelOffset; const length = String(normalizedData.labels[index]).length; labelPositions.forEach(item => { this.moveLabel(labelPosition, item, textOffset, length); }); labelPositions.push(labelPosition); } const labelElement = labelsGroup .elem( 'text', { dx: labelPosition.x, dy: labelPosition.y, 'text-anchor': determineAnchorPosition( center, labelPosition, options.labelDirection ) }, options.classNames.label ) .text(String(interpolatedValue)); // Fire off draw event this.eventEmitter.emit('draw', { type: 'label', index, group: labelsGroup, element: labelElement, text: '' + interpolatedValue, chartRect, series, meta: seriesMeta, ...labelPosition }); } } // Set next startAngle to current endAngle. // (except for last slice) startAngle = endAngle; }); this.eventEmitter.emit('created', { chartRect, svg: svg, options }); } } ================================================ FILE: src/charts/PieChart/PieChart.types.ts ================================================ import type { Options, Label, Data, FlatSeries, CreatedEvent, DrawEvent, NormalizedSeriesValue } from '../../core'; import type { RequiredKeys } from '../../utils'; import type { SvgPath } from '../../svg'; import type { BaseChartEventsTypes } from '../types'; export type PieChartData = Data; export type LabelDirection = 'implode' | 'neutral' | 'explode'; export type AnchorPosition = 'start' | 'middle' | 'end'; export type RadialLabelPosition = 'inside' | 'center' | 'outside'; export interface Dot { x: number; y: number; } export interface PieChartOptions extends Omit { /** * Override the class names that are used to generate the SVG structure of the chart */ classNames?: { chartPie?: string; chartDonut?: string; series?: string; slicePie?: string; sliceDonut?: string; label?: string; }; /** * The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise. */ startAngle?: number; /** * An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts. */ total?: number; /** * If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices. */ donut?: boolean; /** * Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future. * This option can be set as number or string to specify a relative width (i.e. 100 or '30%'). */ donutWidth?: number | string; /** * If a label should be shown or not */ showLabel?: boolean; /** * Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center. */ labelOffset?: number; /** * This option can be set to 'inside', 'outside' or 'center'. * Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. * The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. * The 'center' option only makes sense in conjunction with the 'labelOffset' option. */ labelPosition?: RadialLabelPosition; /** * An interpolation function for the label value */ labelInterpolationFnc?(value: Label, index: number): Label | null | undefined; /** * Label direction can be 'neutral', 'explode' or 'implode'. * The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. * Usually explode is useful when labels are positioned far away from the center. */ labelDirection?: LabelDirection; /** * If true empty values will be ignored to avoid drawing unnecessary slices and labels */ ignoreEmptyValues?: boolean; /** * If nonzero labels will not overlap. */ preventOverlappingLabelOffset?: number; } export type PieChartOptionsWithDefaults = RequiredKeys< PieChartOptions, | 'chartPadding' | 'startAngle' | 'donutWidth' | 'showLabel' | 'labelOffset' | 'labelPosition' | 'labelInterpolationFnc' | 'labelDirection' | 'preventOverlappingLabelOffset', 'classNames' >; export type PieChartCreatedEvent = Omit< CreatedEvent, 'axisX' | 'axisY' >; export interface SliceDrawEvent extends Omit { type: 'slice'; value: NormalizedSeriesValue; totalDataSum: number; path: SvgPath; center: Dot; radius: number; startAngle: number; endAngle: number; } export interface SliceLabelDrawEvent extends Omit { type: 'label'; text: string; x: number; y: number; } export type PieChartEventsTypes = BaseChartEventsTypes< PieChartCreatedEvent, SliceDrawEvent | SliceLabelDrawEvent >; ================================================ FILE: src/charts/PieChart/index.ts ================================================ export * from './PieChart'; export * from './PieChart.types'; ================================================ FILE: src/charts/index.ts ================================================ export * from './BaseChart'; export * from './LineChart'; export * from './BarChart'; export * from './PieChart'; export * from './types'; ================================================ FILE: src/charts/types.ts ================================================ import type { DataEvent, OptionsChangedEvent, DrawEvent, CreatedEvent } from '../core'; import type { AnimationEvent } from '../svg'; export interface BaseChartEventsTypes< TCreateEvent = CreatedEvent, TDrawEvents = DrawEvent > { data: DataEvent; options: OptionsChangedEvent; animationBegin: AnimationEvent; animationEnd: AnimationEvent; created: TCreateEvent; draw: TDrawEvents; } ================================================ FILE: src/core/constants.ts ================================================ /** * This object contains all namespaces used within Chartist. */ export const namespaces: Record = { svg: 'http://www.w3.org/2000/svg', xmlns: 'http://www.w3.org/2000/xmlns/', xhtml: 'http://www.w3.org/1999/xhtml', xlink: 'http://www.w3.org/1999/xlink', ct: 'http://gionkunz.github.com/chartist-js/ct' }; /** * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number. */ export const precision = 8; /** * A map with characters to escape for strings to be safely used as attribute values. */ export const escapingMap: Record = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; ================================================ FILE: src/core/creation.spec.ts ================================================ import { addMockWrapper, mockDom, destroyMockDom } from '../../test/mock/dom'; import { createSvg, createGrid, createGridBackground, normalizePadding } from './creation'; import { EventEmitter } from '../event'; import { Svg } from '../svg'; describe('Core', () => { describe('Creation', () => { beforeEach(() => mockDom()); afterEach(() => destroyMockDom()); describe('createSvg', () => { it('should not remove non-chartist svg elements', () => { const fixture = addMockWrapper(`
`); const container: any = fixture.wrapper.querySelector('#chart-container'); const svg = createSvg(container, '500px', '400px', 'ct-fish-bar'); expect(svg).toBeDefined(); expect(svg.classes()).toContain('ct-fish-bar'); expect(svg.attr('viewBox')).toBeFalsy(); expect(container).toContainElement(document.querySelector('#foo')); expect(container).toContainElement(document.querySelector('#bar')); }); it('should remove previous chartist svg elements', () => { const fixture = addMockWrapper('
'); const container: any = fixture.wrapper.querySelector('#chart-container'); const svg1 = createSvg(container, '500px', '400px', 'ct-fish-bar'); const svg2 = createSvg(container, '800px', '200px', 'ct-snake-bar'); expect(svg1).toBeDefined(); expect(svg1.classes()).toContain('ct-fish-bar'); expect(svg2).toBeDefined(); expect(svg2.classes()).toContain('ct-snake-bar'); expect(container).not.toContainElement( document.querySelector('.ct-fish-bar') ); expect(container).toContainElement( document.querySelector('.ct-snake-bar') ); }); it('should add viewBox to svg elements', () => { const fixture = addMockWrapper(`
`); const container: any = fixture.wrapper.querySelector('#chart-container'); const svg = createSvg(container, '500px', '400px', 'ct-fish-bar', { width: 300, height: 200 }); expect(svg).toBeDefined(); expect(svg.classes()).toContain('ct-fish-bar'); expect(svg.attr('viewBox')).toEqual('0 0 300 200'); expect(container).toContainElement( document.querySelector('.ct-fish-bar') ); }); }); describe('createGrid', () => { let group: any; let axis: any; let classes: any; let eventEmitter: EventEmitter; let position: any; let length: any; let offset: any; beforeEach(() => { eventEmitter = new EventEmitter(); group = new Svg('g'); axis = { units: { pos: 'x' }, counterUnits: { pos: 'y' } }; classes = []; position = 10; length = 100; offset = 20; }); function onCreated(fn: any, done: any) { eventEmitter.on('draw', grid => { fn(grid); done(); }); createGrid( position, 1, axis, offset, length, group, classes, eventEmitter ); } it('should add single grid line to group', done => { onCreated( () => expect(group.querySelectorAll('line').svgElements.length).toBe(1), done ); }); it('should draw line', done => { onCreated(() => { const line = group.querySelector('line'); expect(line.attr('x1')).toBe('10'); expect(line.attr('x2')).toBe('10'); expect(line.attr('y1')).toBe('20'); expect(line.attr('y2')).toBe('120'); }, done); }); it('should draw horizontal line', done => { axis.units.pos = 'y'; axis.counterUnits.pos = 'x'; onCreated(() => { const line = group.querySelector('line'); expect(line.attr('y1')).toBe('10'); expect(line.attr('y2')).toBe('10'); expect(line.attr('x1')).toBe('20'); expect(line.attr('x2')).toBe('120'); }, done); }); }); describe('createGridBackground', () => { let group: any; let chartRect: any; let className: any; let eventEmitter: any; beforeEach(() => { eventEmitter = new EventEmitter(); group = new Svg('g'); className = 'ct-test'; chartRect = { x1: 5, y2: 10, _width: 100, _height: 50, width() { return this._width; }, height() { return this._height; } }; }); function onCreated(fn: any, done: any) { eventEmitter.on('draw', (data: any) => { fn(data); done(); }); createGridBackground(group, chartRect, className, eventEmitter); } it('should add rect', done => { onCreated(() => { const rects = group.querySelectorAll('rect').svgElements; expect(rects.length).toBe(1); const rect = rects[0]; expect(rect.attr('x')).toBe('5'); expect(rect.attr('y')).toBe('10'); expect(rect.attr('width')).toBe('100'); expect(rect.attr('height')).toBe('50'); expect(rect.classes()).toEqual(['ct-test']); }, done); }); it('should pass grid to event', done => { onCreated((data: any) => { expect(data.type).toBe('gridBackground'); const rect = data.element; expect(rect.attr('x')).toBe('5'); expect(rect.attr('y')).toBe('10'); }, done); }); }); describe('padding normalization', () => { it('should normalize number padding', () => { expect(normalizePadding(10)).toEqual({ top: 10, right: 10, bottom: 10, left: 10 }); }); it('should normalize number padding when 0 is passed', () => { expect(normalizePadding(0)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 }); }); it('should normalize empty padding object with default fallback', () => { expect(normalizePadding({})).toEqual({ top: 0, right: 0, bottom: 0, left: 0 }); }); }); }); }); ================================================ FILE: src/core/creation.ts ================================================ import type { ChartPadding, ChartRect, Options, Label, GridDrawEvent, GridBackgroundDrawEvent, LabelDrawEvent, ViewBox } from './types'; import type { EventEmitter } from '../event'; import type { Axis } from '../axes'; import { namespaces } from './constants'; import { Svg } from '../svg/Svg'; import { quantity } from './lang'; /** * Create or reinitialize the SVG element for the chart * @param container The containing DOM Node object that will be used to plant the SVG element * @param width Set the width of the SVG element. Default is 100% * @param height Set the height of the SVG element. Default is 100% * @param className Specify a class to be added to the SVG element * @return The created/reinitialized SVG element */ export function createSvg( container: Element, width: number | string = '100%', height: number | string = '100%', className?: string, viewBox?: ViewBox ) { if (!container) { throw new Error('Container element is not found'); } // Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it // Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/ Array.from(container.querySelectorAll('svg')) .filter(svg => svg.getAttributeNS(namespaces.xmlns, 'ct')) .forEach(svg => container.removeChild(svg)); // Create svg object with width and height or use 100% as default const svg = new Svg('svg') .attr({ width, height }) .attr({ // TODO: Check better solution (browser support) and remove inline styles due to CSP style: `width: ${width}; height: ${height};` }); if (className) { svg.addClass(className); } if (viewBox) { svg.attr({ viewBox: `0 0 ${viewBox.width} ${viewBox.height}` }); } // Add the DOM node to our container container.appendChild(svg.getNode()); return svg; } /** * Converts a number into a padding object. * @param padding * @param fallback This value is used to fill missing values if a incomplete padding object was passed * @returns Returns a padding object containing top, right, bottom, left properties filled with the padding number passed in as argument. If the argument is something else than a number (presumably already a correct padding object) then this argument is directly returned. */ export function normalizePadding( padding: number | Partial | undefined ) { return typeof padding === 'number' ? { top: padding, right: padding, bottom: padding, left: padding } : padding === undefined ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: typeof padding.top === 'number' ? padding.top : 0, right: typeof padding.right === 'number' ? padding.right : 0, bottom: typeof padding.bottom === 'number' ? padding.bottom : 0, left: typeof padding.left === 'number' ? padding.left : 0 }; } /** * Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right * @param svg The svg element for the chart * @param options The Object that contains all the optional values for the chart * @return The chart rectangles coordinates inside the svg element plus the rectangles measurements */ export function createChartRect(svg: Svg, options: Options) { const hasAxis = Boolean(options.axisX || options.axisY); const yAxisOffset = options.axisY?.offset || 0; const xAxisOffset = options.axisX?.offset || 0; const yAxisPosition = options.axisY?.position; const xAxisPosition = options.axisX?.position; // If width or height results in invalid value (including 0) we fallback to the unitless settings or even 0 let width = options.viewBox?.width || svg.width() || quantity(options.width).value || 0; let height = options.viewBox?.height || svg.height() || quantity(options.height).value || 0; const normalizedPadding = normalizePadding(options.chartPadding); // If settings were to small to cope with offset (legacy) and padding, we'll adjust width = Math.max( width, yAxisOffset + normalizedPadding.left + normalizedPadding.right ); height = Math.max( height, xAxisOffset + normalizedPadding.top + normalizedPadding.bottom ); const chartRect = { x1: 0, x2: 0, y1: 0, y2: 0, padding: normalizedPadding, width() { return this.x2 - this.x1; }, height() { return this.y1 - this.y2; } }; if (hasAxis) { if (xAxisPosition === 'start') { chartRect.y2 = normalizedPadding.top + xAxisOffset; chartRect.y1 = Math.max( height - normalizedPadding.bottom, chartRect.y2 + 1 ); } else { chartRect.y2 = normalizedPadding.top; chartRect.y1 = Math.max( height - normalizedPadding.bottom - xAxisOffset, chartRect.y2 + 1 ); } if (yAxisPosition === 'start') { chartRect.x1 = normalizedPadding.left + yAxisOffset; chartRect.x2 = Math.max( width - normalizedPadding.right, chartRect.x1 + 1 ); } else { chartRect.x1 = normalizedPadding.left; chartRect.x2 = Math.max( width - normalizedPadding.right - yAxisOffset, chartRect.x1 + 1 ); } } else { chartRect.x1 = normalizedPadding.left; chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1); chartRect.y2 = normalizedPadding.top; chartRect.y1 = Math.max( height - normalizedPadding.bottom, chartRect.y2 + 1 ); } return chartRect; } /** * Creates a grid line based on a projected value. */ export function createGrid( position: number, index: number, axis: Axis, offset: number, length: number, group: Svg, classes: string[], eventEmitter: EventEmitter ) { const positionalData = { [`${axis.units.pos}1`]: position, [`${axis.units.pos}2`]: position, [`${axis.counterUnits.pos}1`]: offset, [`${axis.counterUnits.pos}2`]: offset + length } as Record<'x1' | 'y1' | 'x2' | 'y2', number>; const gridElement = group.elem('line', positionalData, classes.join(' ')); // Event for grid draw eventEmitter.emit('draw', { type: 'grid', axis, index, group, element: gridElement, ...positionalData }); } /** * Creates a grid background rect and emits the draw event. */ export function createGridBackground( gridGroup: Svg, chartRect: ChartRect, className: string, eventEmitter: EventEmitter ) { const gridBackground = gridGroup.elem( 'rect', { x: chartRect.x1, y: chartRect.y2, width: chartRect.width(), height: chartRect.height() }, className, true ); // Event for grid background draw eventEmitter.emit('draw', { type: 'gridBackground', group: gridGroup, element: gridBackground }); } /** * Creates a label based on a projected value and an axis. */ export function createLabel( position: number, length: number, index: number, label: Label, axis: Axis, axisOffset: number, labelOffset: { x: number; y: number }, group: Svg, classes: string[], eventEmitter: EventEmitter ) { const positionalData = { [axis.units.pos]: position + labelOffset[axis.units.pos], [axis.counterUnits.pos]: labelOffset[axis.counterUnits.pos], [axis.units.len]: length, [axis.counterUnits.len]: Math.max(0, axisOffset - 10) } as Record<'x' | 'y' | 'width' | 'height', number>; // We need to set width and height explicitly to px as span will not expand with width and height being // 100% in all browsers const stepLength = Math.round(positionalData[axis.units.len]); const stepCounterLength = Math.round(positionalData[axis.counterUnits.len]); const content = document.createElement('span'); content.className = classes.join(' '); content.style[axis.units.len] = stepLength + 'px'; content.style[axis.counterUnits.len] = stepCounterLength + 'px'; content.textContent = String(label); const labelElement = group.foreignObject(content, { style: 'overflow: visible;', ...positionalData }); eventEmitter.emit('draw', { type: 'label', axis, index, group, element: labelElement, text: label, ...positionalData }); } ================================================ FILE: src/core/data/bound.spec.ts ================================================ import { getBounds } from './bounds'; import { roundWithPrecision } from '../math'; describe('Core', () => { describe('Data', () => { describe('Bounds', () => { it('should return 10 steps', () => { const bounds = getBounds(100, { high: 10, low: 1 }, 10, false); expect(bounds.min).toBe(1); expect(bounds.max).toBe(10); expect(bounds.values).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); }); it('should return 5 steps', () => { const bounds = getBounds(100, { high: 10, low: 1 }, 20, false); expect(bounds.min).toBe(1); expect(bounds.max).toBe(10); expect(bounds.values).toEqual([1, 3, 5, 7, 9]); }); it('should return non integer steps', () => { const bounds = getBounds(100, { high: 2, low: 1 }, 20, false); expect(bounds.min).toBe(1); expect(bounds.max).toBe(2); expect(bounds.values).toEqual([1, 1.25, 1.5, 1.75, 2]); }); it('should return integer steps only', () => { const bounds = getBounds(100, { high: 3, low: 1 }, 20, true); expect(bounds.min).toBe(1); expect(bounds.max).toBe(3); expect(bounds.values).toEqual([1, 2, 3]); }); it('should return single integer step', () => { const bounds = getBounds(100, { high: 2, low: 1 }, 20, true); expect(bounds.min).toBe(1); expect(bounds.max).toBe(2); expect(bounds.values).toEqual([1, 2]); }); it('should floor/ceil min/max', () => { const bounds = getBounds(100, { high: 9.9, low: 1.01 }, 20, false); expect(bounds.min).toBe(1); expect(bounds.max).toBe(10); expect(bounds.values).toEqual([1, 3, 5, 7, 9]); }); it('should floor/ceil min/max for non integers', () => { const bounds = getBounds(100, { high: 2.9, low: 1.01 }, 20, false); expect(bounds.min).toBe(1); expect(bounds.max).toBe(3); expect(bounds.values).toEqual([1, 1.5, 2, 2.5, 3]); }); it('should floor/ceil min/max if integers only', () => { const bounds = getBounds(100, { high: 2.9, low: 1.01 }, 20, true); expect(bounds.min).toBe(1); expect(bounds.max).toBe(3); expect(bounds.values).toEqual([1, 2, 3]); }); it('should return neg and pos values', () => { const bounds = getBounds(100, { high: 1.9, low: -0.9 }, 20, false); expect(bounds.min).toBe(-1); expect(bounds.max).toBe(2); expect(bounds.values).toEqual([-1, 0, 1, 2]); }); it('should return two steps if no space', () => { const bounds = getBounds(100, { high: 5, low: 0 }, 45, false); expect(bounds.min).toBe(0); expect(bounds.max).toBe(5); expect(bounds.values).toEqual([0, 4]); }); it('should return single step if no space', () => { const bounds = getBounds(100, { high: 5, low: 0 }, 80, false); expect(bounds.min).toBe(0); expect(bounds.max).toBe(5); expect(bounds.values).toEqual([0]); }); it('should return single step if range is less than epsilon', () => { const bounds = getBounds( 100, { high: 1.0000000000000002, low: 1 }, 20, false ); expect(bounds.min).toBe(1); expect(bounds.max).toBe(1.0000000000000002); expect(bounds.low).toBe(1); expect(bounds.high).toBe(1.0000000000000002); expect(bounds.values).toEqual([1]); }); it('should return single step if range is less than smallest increment', () => { const bounds = getBounds( 613.234375, { high: 1000.0000000000001, low: 999.9999999999997 }, 50, false ); expect(bounds.min).toBe(999.9999999999999); expect(bounds.max).toBe(1000); expect(bounds.low).toBe(999.9999999999997); expect(bounds.high).toBe(1000.0000000000001); expect(bounds.values).toEqual([roundWithPrecision(999.9999999999999)]); }); }); }); }); ================================================ FILE: src/core/data/bounds.ts ================================================ import type { Bounds } from '../types'; import { orderOfMagnitude, projectLength, roundWithPrecision, rho, EPSILON } from '../math'; /** * Calculate and retrieve all the bounds for the chart and return them in one array * @param axisLength The length of the Axis used for * @param highLow An object containing a high and low property indicating the value range of the chart. * @param scaleMinSpace The minimum projected length a step should result in * @param onlyInteger * @return All the values to set the bounds of the chart */ export function getBounds( axisLength: number, highLow: { high: number; low: number }, scaleMinSpace: number, onlyInteger = false ) { const bounds: Bounds = { high: highLow.high, low: highLow.low, valueRange: 0, oom: 0, step: 0, min: 0, max: 0, range: 0, numberOfSteps: 0, values: [] }; bounds.valueRange = bounds.high - bounds.low; bounds.oom = orderOfMagnitude(bounds.valueRange); bounds.step = Math.pow(10, bounds.oom); bounds.min = Math.floor(bounds.low / bounds.step) * bounds.step; bounds.max = Math.ceil(bounds.high / bounds.step) * bounds.step; bounds.range = bounds.max - bounds.min; bounds.numberOfSteps = Math.round(bounds.range / bounds.step); // Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace // If we are already below the scaleMinSpace value we will scale up const length = projectLength(axisLength, bounds.step, bounds); const scaleUp = length < scaleMinSpace; const smallestFactor = onlyInteger ? rho(bounds.range) : 0; // First check if we should only use integer steps and if step 1 is still larger than scaleMinSpace so we can use 1 if (onlyInteger && projectLength(axisLength, 1, bounds) >= scaleMinSpace) { bounds.step = 1; } else if ( onlyInteger && smallestFactor < bounds.step && projectLength(axisLength, smallestFactor, bounds) >= scaleMinSpace ) { // If step 1 was too small, we can try the smallest factor of range // If the smallest factor is smaller than the current bounds.step and the projected length of smallest factor // is larger than the scaleMinSpace we should go for it. bounds.step = smallestFactor; } else { // Trying to divide or multiply by 2 and find the best step value let optimizationCounter = 0; for (;;) { if ( scaleUp && projectLength(axisLength, bounds.step, bounds) <= scaleMinSpace ) { bounds.step *= 2; } else if ( !scaleUp && projectLength(axisLength, bounds.step / 2, bounds) >= scaleMinSpace ) { bounds.step /= 2; if (onlyInteger && bounds.step % 1 !== 0) { bounds.step *= 2; break; } } else { break; } if (optimizationCounter++ > 1000) { throw new Error( 'Exceeded maximum number of iterations while optimizing scale step!' ); } } } bounds.step = Math.max(bounds.step, EPSILON); function safeIncrement(value: number, increment: number) { // If increment is too small use *= (1+EPSILON) as a simple nextafter if (value === (value += increment)) { value *= 1 + (increment > 0 ? EPSILON : -EPSILON); } return value; } // Narrow min and max based on new step let newMin = bounds.min; let newMax = bounds.max; while (newMin + bounds.step <= bounds.low) { newMin = safeIncrement(newMin, bounds.step); } while (newMax - bounds.step >= bounds.high) { newMax = safeIncrement(newMax, -bounds.step); } bounds.min = newMin; bounds.max = newMax; bounds.range = bounds.max - bounds.min; const values: number[] = []; for (let i = bounds.min; i <= bounds.max; i = safeIncrement(i, bounds.step)) { const value = roundWithPrecision(i); if (value !== values[values.length - 1]) { values.push(value); } } bounds.values = values; return bounds; } ================================================ FILE: src/core/data/data.ts ================================================ import type { Multi, AxisName, FlatSeriesValue, Series, SeriesObject } from '../types'; import { safeHasProperty, getNumberOrUndefined } from '../../utils'; /** * Get meta data of a specific value in a series. */ export function getMetaData( seriesData: FlatSeriesValue | Series | SeriesObject, index: number ) { const value = Array.isArray(seriesData) ? seriesData[index] : safeHasProperty(seriesData, 'data') ? seriesData.data[index] : null; return safeHasProperty(value, 'meta') ? value.meta : undefined; } /** * Checks if a value is considered a hole in the data series. * @returns True if the value is considered a data hole */ export function isDataHoleValue(value: unknown): value is null | undefined; export function isDataHoleValue(value: unknown) { return ( value === null || value === undefined || (typeof value === 'number' && isNaN(value)) ); } /** * Checks if value is array of series objects. */ export function isArrayOfSeries( value: unknown ): value is (Series | SeriesObject)[] { return ( Array.isArray(value) && value.every(_ => Array.isArray(_) || safeHasProperty(_, 'data')) ); } /** * Checks if provided value object is multi value (contains x or y properties) */ export function isMultiValue(value: unknown): value is Multi { return ( typeof value === 'object' && value !== null && (Reflect.has(value, 'x') || Reflect.has(value, 'y')) ); } /** * Gets a value from a dimension `value.x` or `value.y` while returning value directly if it's a valid numeric value. If the value is not numeric and it's falsey this function will return `defaultValue`. */ export function getMultiValue( value: Multi | number | unknown, dimension: AxisName = 'y' ) { if (isMultiValue(value) && safeHasProperty(value, dimension)) { return getNumberOrUndefined(value[dimension]); } else { return getNumberOrUndefined(value); } } ================================================ FILE: src/core/data/highLow.ts ================================================ import type { Options, AxisName, NormalizedSeries, NormalizedSeriesValue } from '../types'; import { safeHasProperty } from '../../utils'; import { isDataHoleValue } from './data'; /** * Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart. * @param data The array that contains the data to be visualized in the chart * @param options The Object that contains the chart options * @param dimension Axis dimension 'x' or 'y' used to access the correct value and high / low configuration * @return An object that contains the highest and lowest value that will be visualized on the chart. */ export function getHighLow( data: NormalizedSeries[], options: Options, dimension?: AxisName ) { // TODO: Remove workaround for deprecated global high / low config. Axis high / low configuration is preferred options = { ...options, ...(dimension ? (dimension === 'x' ? options.axisX : options.axisY) : {}) }; const highLow = { high: options.high === undefined ? -Number.MAX_VALUE : +options.high, low: options.low === undefined ? Number.MAX_VALUE : +options.low }; const findHigh = options.high === undefined; const findLow = options.low === undefined; // Function to recursively walk through arrays and find highest and lowest number function recursiveHighLow( sourceData: NormalizedSeriesValue | NormalizedSeries | NormalizedSeries[] ) { if (isDataHoleValue(sourceData)) { return; } else if (Array.isArray(sourceData)) { for (let i = 0; i < sourceData.length; i++) { recursiveHighLow(sourceData[i]); } } else { const value = Number( dimension && safeHasProperty(sourceData, dimension) ? sourceData[dimension] : sourceData ); if (findHigh && value > highLow.high) { highLow.high = value; } if (findLow && value < highLow.low) { highLow.low = value; } } } // Start to find highest and lowest number recursively if (findHigh || findLow) { recursiveHighLow(data); } // Overrides of high / low based on reference value, it will make sure that the invisible reference value is // used to generate the chart. This is useful when the chart always needs to contain the position of the // invisible reference value in the view i.e. for bipolar scales. if (options.referenceValue || options.referenceValue === 0) { highLow.high = Math.max(options.referenceValue, highLow.high); highLow.low = Math.min(options.referenceValue, highLow.low); } // If high and low are the same because of misconfiguration or flat data (only the same value) we need // to set the high or low to 0 depending on the polarity if (highLow.high <= highLow.low) { // If both values are 0 we set high to 1 if (highLow.low === 0) { highLow.high = 1; } else if (highLow.low < 0) { // If we have the same negative value for the bounds we set bounds.high to 0 highLow.high = 0; } else if (highLow.high > 0) { // If we have the same positive value for the bounds we set bounds.low to 0 highLow.low = 0; } else { // If data array was empty, values are Number.MAX_VALUE and -Number.MAX_VALUE. Set bounds to prevent errors highLow.high = 1; highLow.low = 0; } } return highLow; } ================================================ FILE: src/core/data/index.ts ================================================ export * from './bounds'; export * from './data'; export * from './highLow'; export * from './normalize'; export * from './segments'; export * from './serialize'; ================================================ FILE: src/core/data/normalize.spec.ts ================================================ import { normalizeData } from './normalize'; describe('Core', () => { describe('Data', () => { describe('Normalize', () => { it('should normalize mixed series types correctly', () => { const data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ { data: [1, 0, 3, 4, 5, 6] }, [1, { value: 0 }, 3, { value: 4 }, 5, 6, 7, 8], { data: [1, 0, { value: 3 }] } ] }; expect(normalizeData(data).series).toEqual([ [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined], [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined], [ 1, 0, 3, undefined, undefined, undefined, undefined, undefined, undefined, undefined ] ]); }); it('should normalize mixed series for pie chart correctly', () => { const data = { series: [1, { value: 0 }, 3, { value: 4 }, 5, 6, 7, 8] }; expect(normalizeData(data).series).toEqual([1, 0, 3, 4, 5, 6, 7, 8]); }); it('should normalize mixed series with string values for pie chart correctly', () => { const data = { series: ['1', { value: '0' }, '3', { value: '4' }, '5', '6', '7', '8'] }; expect(normalizeData(data).series).toEqual([1, 0, 3, 4, 5, 6, 7, 8]); }); it('should normalize mixed series types with string values correctly', () => { const data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ { data: ['1', '0', '3', '4', '5', '6'] }, ['1', { value: '0' }, '3', { value: '4' }, '5', '6', '7', '8'], { data: ['1', '0', { value: '3' }] } ] }; expect(normalizeData(data).series).toEqual([ [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined], [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined], [ 1, 0, 3, undefined, undefined, undefined, undefined, undefined, undefined, undefined ] ]); }); it('should normalize mixed series types with weird values correctly', () => { const data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], series: [ { data: [null, NaN, undefined, '4', '5', '6'] }, ['1', { value: null }, '3', { value: NaN }, '5', '6', '7', '8'], { data: ['1', '0', { value: undefined }] } ] }; expect(normalizeData(data).series).toEqual([ [ undefined, undefined, undefined, 4, 5, 6, undefined, undefined, undefined, undefined ], [1, undefined, 3, undefined, 5, 6, 7, 8, undefined, undefined], [ 1, 0, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ] ]); }); it('should normalize correctly with 0 values in data series array objects', () => { const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [ { data: [ { value: 1 }, { value: 4 }, { value: 2 }, { value: 7 }, { value: 2 }, { value: 0 } ] } ] }; expect(normalizeData(data).series).toEqual([[1, 4, 2, 7, 2, 0]]); }); it('should normalize correctly with mixed dimensional input into multi dimensional output', () => { const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [ { data: [ { value: 1 }, { value: { y: 4, x: 1 } }, { y: 2, x: 2 }, NaN, null, { value: 7 }, { value: 2 }, { value: null }, { y: undefined, x: NaN } ] } ] }; expect(normalizeData(data, false, true).series).toEqual([ [ { x: undefined, y: 1 }, { x: 1, y: 4 }, { x: 2, y: 2 }, undefined, undefined, { x: undefined, y: 7 }, { x: undefined, y: 2 }, undefined, undefined ] ]); }); it('should normalize boolean series correctly', () => { const data = { series: [[true, false, false, true]] }; expect(normalizeData(data).series).toEqual([[1, 0, 0, 1]]); }); it('should normalize date series correctly', () => { const data = { series: [[new Date(0), new Date(1), new Date(2), new Date(3)]] }; expect(normalizeData(data).series).toEqual([[0, 1, 2, 3]]); }); it('should align series data by holes', () => { const data = { series: [ [1, 2, 3, 4], [1, 2, 3], [1, 2] ] }; expect(normalizeData(data).series).toEqual([ [1, 2, 3, 4], [1, 2, 3, undefined], [1, 2, undefined, undefined] ]); }); it('should align series data with lables by holes', () => { const data = { labels: ['a', 'b', 'c', 'd', 'e', 'f'], series: [ [1, 2, 3, 4], [1, 2, 3], [1, 2] ] }; expect(normalizeData(data).series).toEqual([ [1, 2, 3, 4, undefined, undefined], [1, 2, 3, undefined, undefined, undefined], [1, 2, undefined, undefined, undefined, undefined] ]); }); }); }); }); ================================================ FILE: src/core/data/normalize.ts ================================================ import type { Data, NormalizedData, Multi, AxisName, NormalizedMulti, Series, FlatSeries, NormalizedSeries, NormalizedFlatSeries, SeriesObject, SeriesPrimitiveValue } from '../types'; import { isArrayOfArrays, times, safeHasProperty, getNumberOrUndefined } from '../../utils'; import { isDataHoleValue, isArrayOfSeries } from './data'; /** * Ensures that the data object passed as second argument to the charts is present and correctly initialized. * @param data The data object that is passed as second argument to the charts * @return The normalized data object */ export function normalizeData( data: Data, reverse?: boolean, multi?: false ): NormalizedData; export function normalizeData( data: Data<(Series | SeriesObject)[]>, reverse: boolean | undefined, multi: true | AxisName ): NormalizedData; export function normalizeData( data: Data, reverse: boolean | undefined, multi: boolean | AxisName, distributed: true ): NormalizedData; export function normalizeData( data: Data, reverse?: boolean, multi?: boolean | AxisName ): NormalizedData; export function normalizeData( data: Data, reverse = false, multi?: boolean | AxisName, distributed?: boolean ) { let labelCount: number; const normalized: NormalizedData = { labels: (data.labels || []).slice(), series: normalizeSeries(data.series, multi, distributed) }; const inputLabelCount = normalized.labels.length; // If all elements of the normalized data array are arrays we're dealing with // multi series data and we need to find the largest series if they are un-even if (isArrayOfArrays(normalized.series)) { // Getting the series with the the most elements labelCount = Math.max( inputLabelCount, ...normalized.series.map(series => series.length) ); normalized.series.forEach(series => { series.push(...times(Math.max(0, labelCount - series.length))); }); } else { // We're dealing with Pie data so we just take the normalized array length labelCount = normalized.series.length; } // Padding the labels to labelCount with empty strings normalized.labels.push( ...times(Math.max(0, labelCount - inputLabelCount), () => '') ); if (reverse) { reverseData(normalized); } return normalized; } /** * Reverses the series, labels and series data arrays. */ function reverseData(data: Data) { data.labels?.reverse(); data.series.reverse(); for (const series of data.series) { if (safeHasProperty(series, 'data')) { series.data.reverse(); } else if (Array.isArray(series)) { series.reverse(); } } } function normalizeMulti( value: number | string | boolean | Date | Multi, multi?: boolean | AxisName ) { // We need to prepare multi value output (x and y data) let x: number | undefined; let y: number | undefined; // Single series value arrays are assumed to specify the Y-Axis value // For example: [1, 2] => [{x: undefined, y: 1}, {x: undefined, y: 2}] // If multi is a string then it's assumed that it specified which dimension should be filled as default if (typeof value !== 'object') { const num = getNumberOrUndefined(value); if (multi === 'x') { x = num; } else { y = num; } } else { if (safeHasProperty(value, 'x')) { x = getNumberOrUndefined(value.x); } if (safeHasProperty(value, 'y')) { y = getNumberOrUndefined(value.y); } } if (x === undefined && y === undefined) { return undefined; } return { x, y } as NormalizedMulti; } function normalizePrimitive( value: SeriesPrimitiveValue, multi?: boolean | AxisName ) { if (isDataHoleValue(value)) { // We're dealing with a hole in the data and therefore need to return undefined // We're also returning undefined for multi value output return undefined; } if (multi) { return normalizeMulti(value, multi); } return getNumberOrUndefined(value); } function normalizeSingleSeries( series: Series | SeriesObject, multi?: boolean | AxisName ): NormalizedSeries { if (!Array.isArray(series)) { // We are dealing with series object notation so we need to recurse on data property return normalizeSingleSeries(series.data, multi); } return series.map(value => { if (safeHasProperty(value, 'value')) { // We are dealing with value object notation so we need to recurse on value property return normalizePrimitive(value.value, multi); } return normalizePrimitive(value, multi); }); } /** * Convert data series into plain array * @param series The series object that contains the data to be visualized in the chart * @param multi Create a multi dimensional array from a series data array where a value object with `x` and `y` values will be created. * @return A plain array that contains the data to be visualized in the chart */ function normalizeSeries( series: FlatSeries, multi?: false, distributed?: false ): NormalizedFlatSeries; function normalizeSeries( series: (Series | SeriesObject)[], multi: true | AxisName, distributed?: false ): NormalizedSeries[]; function normalizeSeries( series: FlatSeries | (Series | SeriesObject)[], multi: boolean | undefined | AxisName, distributed: true ): NormalizedSeries[]; function normalizeSeries( series: FlatSeries | (Series | SeriesObject)[], multi?: boolean | undefined | AxisName, distributed?: boolean ): NormalizedFlatSeries | NormalizedSeries[]; function normalizeSeries( series: FlatSeries | (Series | SeriesObject)[], multi?: boolean | undefined | AxisName, distributed?: boolean ) { if (isArrayOfSeries(series)) { return series.map(_ => normalizeSingleSeries(_, multi)); } const normalizedSeries = normalizeSingleSeries(series, multi); if (distributed) { return normalizedSeries.map(value => [value]); } return normalizedSeries; } ================================================ FILE: src/core/data/segments.spec.ts ================================================ import { splitIntoSegments } from './segments'; describe('Core', () => { describe('Data', () => { describe('Segments', () => { function makeValues(arr: T[]) { return arr.map((x, i) => ({ value: x, valueIndex: i })); } it('should return empty array for empty input', () => { expect(splitIntoSegments([], [])).toEqual([]); }); it('should remove undefined values', () => { const coords = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const values = makeValues([1, undefined, undefined, 4, undefined, 6]); expect(splitIntoSegments(coords, values)).toEqual([ { pathCoordinates: [1, 2], valueData: [{ value: 1, valueIndex: 0 }] }, { pathCoordinates: [7, 8], valueData: [{ value: 4, valueIndex: 3 }] }, { pathCoordinates: [11, 12], valueData: [{ value: 6, valueIndex: 5 }] } ]); }); it('should respect fillHoles option', () => { const coords = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const values = makeValues([1, undefined, undefined, 4, undefined, 6]); const options = { fillHoles: true }; expect(splitIntoSegments(coords, values, options)).toEqual([ { pathCoordinates: [1, 2, 7, 8, 11, 12], valueData: [ { value: 1, valueIndex: 0 }, { value: 4, valueIndex: 3 }, { value: 6, valueIndex: 5 } ] } ]); }); it('should respect increasingX option', () => { const coords = [1, 2, 3, 4, 5, 6, 5, 6, 7, 8, 1, 2]; const values = makeValues([1, 2, 3, 4, 5, 6]); const options = { increasingX: true }; expect(splitIntoSegments(coords, values, options)).toEqual([ { pathCoordinates: [1, 2, 3, 4, 5, 6], valueData: [ { value: 1, valueIndex: 0 }, { value: 2, valueIndex: 1 }, { value: 3, valueIndex: 2 } ] }, { pathCoordinates: [5, 6, 7, 8], valueData: [ { value: 4, valueIndex: 3 }, { value: 5, valueIndex: 4 } ] }, { pathCoordinates: [1, 2], valueData: [{ value: 6, valueIndex: 5 }] } ]); }); }); }); }); ================================================ FILE: src/core/data/segments.ts ================================================ import type { Segment, SegmentData } from '../types'; import { getMultiValue } from './data'; /** * Splits a list of coordinates and associated values into segments. Each returned segment contains a pathCoordinates * valueData property describing the segment. * * With the default options, segments consist of contiguous sets of points that do not have an undefined value. Any * points with undefined values are discarded. * * **Options** * The following options are used to determine how segments are formed * ```javascript * var options = { * // If fillHoles is true, undefined values are simply discarded without creating a new segment. Assuming other options are default, this returns single segment. * fillHoles: false, * // If increasingX is true, the coordinates in all segments have strictly increasing x-values. * increasingX: false * }; * ``` * * @param pathCoordinates List of point coordinates to be split in the form [x1, y1, x2, y2 ... xn, yn] * @param valueData List of associated point values in the form [v1, v2 .. vn] * @param options Options set by user * @return List of segments, each containing a pathCoordinates and valueData property. */ export function splitIntoSegments( pathCoordinates: number[], valueData: SegmentData[], options?: { increasingX?: boolean; fillHoles?: boolean; } ) { const finalOptions = { increasingX: false, fillHoles: false, ...options }; const segments: Segment[] = []; let hole = true; for (let i = 0; i < pathCoordinates.length; i += 2) { // If this value is a "hole" we set the hole flag if (getMultiValue(valueData[i / 2].value) === undefined) { // if(valueData[i / 2].value === undefined) { if (!finalOptions.fillHoles) { hole = true; } } else { if ( finalOptions.increasingX && i >= 2 && pathCoordinates[i] <= pathCoordinates[i - 2] ) { // X is not increasing, so we need to make sure we start a new segment hole = true; } // If it's a valid value we need to check if we're coming out of a hole and create a new empty segment if (hole) { segments.push({ pathCoordinates: [], valueData: [] }); // As we have a valid value now, we are not in a "hole" anymore hole = false; } // Add to the segment pathCoordinates and valueData segments[segments.length - 1].pathCoordinates.push( pathCoordinates[i], pathCoordinates[i + 1] ); segments[segments.length - 1].valueData.push(valueData[i / 2]); } } return segments; } ================================================ FILE: src/core/data/serialize.spec.ts ================================================ import { serialize, deserialize } from './serialize'; describe('Core', () => { describe('Data', () => { describe('Serialize', () => { it('should serialize and deserialize regular strings', () => { const input = 'String test'; expect(input).toMatch(deserialize(serialize(input))); }); it('should serialize and deserialize strings with critical characters', () => { const input = 'String test with critical characters " < > \' & &'; expect(input).toMatch(deserialize(serialize(input))); }); it('should serialize and deserialize numbers', () => { const input = 12345.6789; expect(input).toEqual(deserialize(serialize(input))); }); it('should serialize and deserialize dates', () => { const input = new Date(0); expect(+input).toEqual(+new Date(deserialize(serialize(input)))); }); it('should serialize and deserialize complex object types', () => { const input = { a: { b: 100, c: 'String test', d: 'String test with critical characters " < > \' & &', e: { f: 'String test' } } }; expect(input).toEqual(deserialize(serialize(input))); }); it('should serialize and deserialize null, undefined and NaN', () => { expect(null).toEqual(deserialize(serialize(null))); expect(undefined).toEqual(deserialize(serialize(undefined))); expect(deserialize(serialize(NaN))).toBeNaN(); }); }); }); }); ================================================ FILE: src/core/data/serialize.ts ================================================ import { escapingMap } from '../constants'; /** * This function serializes arbitrary data to a string. In case of data that can't be easily converted to a string, this function will create a wrapper object and serialize the data using JSON.stringify. The outcoming string will always be escaped using Chartist.escapingMap. * If called with null or undefined the function will return immediately with null or undefined. */ export function serialize(data: number | string | object): string; export function serialize( data: number | string | object | null | undefined | unknown ): string | null | undefined; export function serialize( data: number | string | object | null | undefined | unknown ) { let serialized = ''; if (data === null || data === undefined) { return data; } else if (typeof data === 'number') { serialized = '' + data; } else if (typeof data === 'object') { serialized = JSON.stringify({ data: data }); } else { serialized = String(data); } return Object.keys(escapingMap).reduce( (result, key) => result.replaceAll(key, escapingMap[key]), serialized ); } /** * This function de-serializes a string previously serialized with Chartist.serialize. The string will always be unescaped using Chartist.escapingMap before it's returned. Based on the input value the return type can be Number, String or Object. JSON.parse is used with try / catch to see if the unescaped string can be parsed into an Object and this Object will be returned on success. */ export function deserialize( data: string ): T; export function deserialize( data: string | null | undefined ): T | null | undefined; export function deserialize(data: unknown) { if (typeof data !== 'string') { return data; } if (data === 'NaN') { return NaN; } data = Object.keys(escapingMap).reduce( (result, key) => result.replaceAll(escapingMap[key], key), data ); // eslint-disable-next-line @typescript-eslint/no-explicit-any let parsedData: any = data; if (typeof data === 'string') { try { parsedData = JSON.parse(data); parsedData = parsedData.data !== undefined ? parsedData.data : parsedData; } catch (e) { /* Ingore */ } } return parsedData; } ================================================ FILE: src/core/index.ts ================================================ export * from './constants'; export * from './lang'; export * from './math'; export * from './data'; export * from './creation'; export * from './optionsProvider'; export * from './types'; ================================================ FILE: src/core/lang.spec.ts ================================================ import { quantity } from './lang'; describe('Core', () => { describe('Lang', () => { describe('quantity', () => { it('should return value for numbers', () => { expect(quantity(100)).toEqual({ value: 100 }); expect(quantity(0)).toEqual({ value: 0 }); expect(quantity(NaN)).toEqual({ value: NaN }); expect(quantity(null)).toEqual({ value: 0 }); expect(quantity(undefined)).toEqual({ value: NaN }); }); it('should return value without unit from string', () => { expect(quantity('100')).toEqual({ value: 100, unit: undefined }); expect(quantity('0')).toEqual({ value: 0, unit: undefined }); }); it('should return value and unit from string', () => { expect(quantity('100%')).toEqual({ value: 100, unit: '%' }); expect(quantity('100 %')).toEqual({ value: 100, unit: '%' }); expect(quantity('0px')).toEqual({ value: 0, unit: 'px' }); }); }); }); }); ================================================ FILE: src/core/lang.ts ================================================ /** * Converts a number to a string with a unit. If a string is passed then this will be returned unmodified. * @return Returns the passed number value with unit. */ export function ensureUnit(value: T, unit: string) { if (typeof value === 'number') { return value + unit; } return value; } /** * Converts a number or string to a quantity object. * @return Returns an object containing the value as number and the unit as string. */ export function quantity(input: T) { if (typeof input === 'string') { const match = /^(\d+)\s*(.*)$/g.exec(input); return { value: match ? +match[1] : 0, unit: match?.[2] || undefined }; } return { value: Number(input) }; } /** * Generates a-z from a number 0 to 26 * @param n A number from 0 to 26 that will result in a letter a-z * @return A character from a-z based on the input number n */ export function alphaNumerate(n: number) { // Limit to a-z return String.fromCharCode(97 + (n % 26)); } ================================================ FILE: src/core/math.ts ================================================ import type { Bounds } from './types'; import { precision as globalPrecision } from './constants'; export const EPSILON = 2.221e-16; /** * Calculate the order of magnitude for the chart scale * @param value The value Range of the chart * @return The order of magnitude */ export function orderOfMagnitude(value: number) { return Math.floor(Math.log(Math.abs(value)) / Math.LN10); } /** * Project a data length into screen coordinates (pixels) * @param axisLength The svg element for the chart * @param length Single data value from a series array * @param bounds All the values to set the bounds of the chart * @return The projected data length in pixels */ export function projectLength( axisLength: number, length: number, bounds: Bounds ) { return (length / bounds.range) * axisLength; } /** * This helper function can be used to round values with certain precision level after decimal. This is used to prevent rounding errors near float point precision limit. * @param value The value that should be rounded with precision * @param [digits] The number of digits after decimal used to do the rounding * @returns Rounded value */ export function roundWithPrecision(value: number, digits?: number) { const precision = Math.pow(10, digits || globalPrecision); return Math.round(value * precision) / precision; } /** * Pollard Rho Algorithm to find smallest factor of an integer value. There are more efficient algorithms for factorization, but this one is quite efficient and not so complex. * @param num An integer number where the smallest factor should be searched for * @returns The smallest integer factor of the parameter num. */ export function rho(num: number) { if (num === 1) { return num; } function gcd(p: number, q: number): number { if (p % q === 0) { return q; } else { return gcd(q, p % q); } } function f(x: number) { return x * x + 1; } let x1 = 2; let x2 = 2; let divisor: number; if (num % 2 === 0) { return 2; } do { x1 = f(x1) % num; x2 = f(f(x2)) % num; divisor = gcd(Math.abs(x1 - x2), num); } while (divisor === 1); return divisor; } /** * Calculate cartesian coordinates of polar coordinates * @param centerX X-axis coordinates of center point of circle segment * @param centerY X-axis coordinates of center point of circle segment * @param radius Radius of circle segment * @param angleInDegrees Angle of circle segment in degrees * @return Coordinates of point on circumference */ export function polarToCartesian( centerX: number, centerY: number, radius: number, angleInDegrees: number ) { const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians) }; } ================================================ FILE: src/core/optionsProvider.ts ================================================ import type { EventEmitter } from '../event'; import type { OptionsChangedEvent, ResponsiveOptions } from './types'; import { extend } from '../utils'; export interface OptionsProvider { removeMediaQueryListeners(): void; getCurrentOptions(): T; } /** * Provides options handling functionality with callback for options changes triggered by responsive options and media query matches * @param options Options set by user * @param responsiveOptions Optional functions to add responsive behavior to chart * @param eventEmitter The event emitter that will be used to emit the options changed events * @return The consolidated options object from the defaults, base and matching responsive options */ export function optionsProvider( options: T, responsiveOptions: ResponsiveOptions | undefined, eventEmitter: EventEmitter ): OptionsProvider { let currentOptions: T; const mediaQueryListeners: MediaQueryList[] = []; function updateCurrentOptions(mediaEvent?: Event) { const previousOptions = currentOptions; currentOptions = extend({}, options); if (responsiveOptions) { responsiveOptions.forEach(responsiveOption => { const mql = window.matchMedia(responsiveOption[0]); if (mql.matches) { currentOptions = extend({}, currentOptions, responsiveOption[1]); } }); } if (eventEmitter && mediaEvent) { eventEmitter.emit>('optionsChanged', { previousOptions, currentOptions }); } } function removeMediaQueryListeners() { mediaQueryListeners.forEach(mql => mql.removeEventListener('change', updateCurrentOptions) ); } if (!window.matchMedia) { throw new Error( "window.matchMedia not found! Make sure you're using a polyfill." ); } else if (responsiveOptions) { responsiveOptions.forEach(responsiveOption => { const mql = window.matchMedia(responsiveOption[0]); mql.addEventListener('change', updateCurrentOptions); mediaQueryListeners.push(mql); }); } // Execute initially without an event argument so we get the correct options updateCurrentOptions(); return { removeMediaQueryListeners, getCurrentOptions() { return currentOptions; } }; } ================================================ FILE: src/core/types.ts ================================================ import type { RequiredKeys } from '../utils'; import type { Axis, AxisType } from '../axes'; import type { Svg } from '../svg'; export interface ChartPadding { top: number; right: number; bottom: number; left: number; } export interface ChartRect { x1: number; x2: number; y1: number; y2: number; padding: ChartPadding; width(): number; height(): number; } // eslint-disable-next-line @typescript-eslint/no-explicit-any export type Plugin = (chart: any, options?: any) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type Meta = any; export interface ViewBox { width: number; height: number; } export interface Options< TXAxisOptions = AxisOptions, TYAxisOptions = TXAxisOptions > { /** * Specify a fixed width for the chart as a string (i.e. '100px' or '50%') */ width?: number | string; /** * Specify a fixed height for the chart as a string (i.e. '100px' or '50%') */ height?: number | string; /** * Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value */ low?: number; /** * Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value */ high?: number; /** * Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale. */ referenceValue?: number; /** * Padding of the chart drawing area to the container element and labels as a number or padding object. */ chartPadding?: number | Partial; /** * Options for X-Axis */ axisX?: TXAxisOptions; /** * Options for Y-Axis */ axisY?: TYAxisOptions; /** * Override the class names that get used to generate the SVG structure of the chart */ classNames?: Record; // eslint-disable-next-line @typescript-eslint/no-explicit-any plugins?: (Plugin | [Plugin, any])[]; /** * Define the ViewBox for an SVG, this is optional and only required if you need a scalable chart. This should be used together with responsive options to ensure a proper text size. */ viewBox?: ViewBox; } export interface AxisOptions { type?: AxisType; /** * Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value */ low?: number; /** * Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value */ high?: number; /** * Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale. */ referenceValue?: number; /** * The offset of the chart drawing area to the border of the container */ offset?: number; /** * Position where labels are placed. * Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis. */ position?: 'start' | 'end'; /** * Allows you to correct label positioning on this axis by positive or negative x and y offset. */ labelOffset?: { x: number; y: number; }; /** * If labels should be shown or not */ showLabel?: boolean; /** * If the axis grid should be drawn or not */ showGrid?: boolean; /** * Interpolation function that allows you to intercept the value from the axis label */ labelInterpolationFnc?(value: Label, index: number): Label | null | undefined; /** * This value specifies the minimum width in pixel of the scale steps */ scaleMinSpace?: number; /** * Use only integer values (whole numbers) for the scale steps */ onlyInteger?: boolean; ticks?: Label[]; stretch?: boolean; divisor?: number; highLow?: { high: number; low: number; }; } export type OptionsWithDefaults = RequiredKeys< Options< RequiredKeys< AxisOptions, 'offset' | 'labelOffset' | 'labelInterpolationFnc' >, RequiredKeys< AxisOptions, 'offset' | 'labelOffset' | 'labelInterpolationFnc' > >, 'axisX' | 'axisY' | 'classNames' >; export type ResponsiveOptions = [string, T][]; export interface Bounds { high: number; low: number; valueRange: number; oom: number; step: number; min: number; max: number; range: number; numberOfSteps: number; values: number[]; } export interface Segment { pathCoordinates: number[]; valueData: SegmentData[]; } export interface SegmentData { value: NormalizedSeriesValue; valueIndex: number; meta?: Meta; } export type AxisName = 'x' | 'y'; export type Multi = | { x: number | string | Date | null; y: number | string | Date | null; } | { x: number | string | Date | null; } | { y: number | string | Date | null; }; export type NormalizedMulti = | { x: number; y: number; } | { x: number; } | { y: number; }; /** * Data */ export type Label = string | number | Date; export type AllSeriesTypes = FlatSeries | (Series | SeriesObject)[]; export interface Data { labels?: Label[] | undefined; series: T; } /** * Series */ export type Series = SeriesValue[]; export interface SeriesObject { name?: string; className?: string; meta?: Meta; data: SeriesValue[]; } export type SeriesValue = SeriesObjectValue | T; export type SeriesPrimitiveValue = | number | string | boolean | Date | Multi | null | undefined; export interface SeriesObjectValue { meta?: Meta; value: T; } /** * Flat Series */ export type FlatSeries = FlatSeriesValue[]; export type FlatSeriesValue = | SeriesValue | FlatSeriesObjectValue; export type FlatSeriesPrimitiveValue = number | string | null | undefined; export interface FlatSeriesObjectValue { name?: string; className?: string; meta?: Meta; value: T; } /** * Normalized Data */ export type AllNormalizedSeriesTypes = | NormalizedFlatSeries | NormalizedSeries[]; export interface NormalizedData< T extends AllNormalizedSeriesTypes = AllNormalizedSeriesTypes > extends Data { labels: Label[]; series: T; } /** * Normalized Series */ export type NormalizedSeries = NormalizedSeriesValue[]; export type NormalizedSeriesValue = NormalizedSeriesPrimitiveValue; export type NormalizedSeriesPrimitiveValue = | number | NormalizedMulti | undefined; /** * Normalized Flat Series */ export type NormalizedFlatSeries = number[]; /** * Events */ export interface CreatedEvent { chartRect: ChartRect; axisX: Axis; axisY: Axis; svg: Svg; options: TOptions; } export interface DrawEvent { type: string; element: Svg; group: Svg; chartRect: ChartRect; axisX: Axis; axisY: Axis; meta: Meta; index: number; series: FlatSeriesValue | Series | SeriesObject; seriesIndex: number; } export interface DataEvent { type: 'initial' | 'update'; data: Data; } export interface OptionsChangedEvent { previousOptions: T; currentOptions: T; } export interface GridDrawEvent extends Omit< DrawEvent, 'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex' > { type: 'grid'; axis: Axis; x1: number; y1: number; x2: number; y2: number; } export interface GridBackgroundDrawEvent { type: 'gridBackground'; group: Svg; element: Svg; } export interface LabelDrawEvent extends Omit< DrawEvent, 'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex' > { type: 'label'; axis: Axis; text: Label; x: number; y: number; width: number; height: number; } export type AxesDrawEvent = | GridDrawEvent | GridBackgroundDrawEvent | LabelDrawEvent; ================================================ FILE: src/event/EventEmitter.ts ================================================ /* eslint-disable @typescript-eslint/no-explicit-any */ export type EventListener = (data: T) => void; export type AllEventsListener = (event: string, data: T) => void; export class EventEmitter { private readonly listeners = new Map>(); private readonly allListeners = new Set(); /** * Add an event handler for a specific event * @param event The event name * @param listener A event handler function */ on(event: '*', listener: AllEventsListener): void; on(event: string, listener: EventListener): void; on(event: string, listener: EventListener | AllEventsListener) { const { allListeners, listeners } = this; if (event === '*') { allListeners.add(listener); } else { if (!listeners.has(event)) { listeners.set(event, new Set()); } (listeners.get(event) as Set).add( listener as EventListener ); } } /** * Remove an event handler of a specific event name or remove all event handlers for a specific event. * @param event The event name where a specific or all handlers should be removed * @param [listener] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed. */ off(event: '*', listener?: AllEventsListener): void; off(event: string, listener?: EventListener): void; off(event: string, listener?: EventListener | AllEventsListener) { const { allListeners, listeners } = this; if (event === '*') { if (listener) { allListeners.delete(listener); } else { allListeners.clear(); } } else if (listeners.has(event)) { const eventListeners = listeners.get(event) as Set; if (listener) { eventListeners.delete(listener as EventListener); } else { eventListeners.clear(); } if (!eventListeners.size) { listeners.delete(event); } } } /** * Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter. * @param event The event name that should be triggered * @param data Arbitrary data that will be passed to the event handler callback functions */ emit(event: string, data: T) { const { allListeners, listeners } = this; // Only do something if there are event handlers with this name existing if (listeners.has(event)) { (listeners.get(event) as Set).forEach(listener => listener(data) ); } // Emit event to star event handlers allListeners.forEach(listener => listener(event, data)); } } ================================================ FILE: src/event/index.ts ================================================ export * from './EventEmitter'; ================================================ FILE: src/index.ts ================================================ export * from './core'; export * from './event'; export * from './charts'; export * from './axes'; export * as Interpolation from './interpolation'; export * from './svg'; export * from './utils'; ================================================ FILE: src/interpolation/cardinal.ts ================================================ import type { SegmentData } from '../core'; import { splitIntoSegments } from '../core'; import { SvgPath } from '../svg'; import { none } from './none'; export interface CardinalInterpolationOptions { tension?: number; fillHoles?: boolean; } /** * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results. * * Cardinal splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`. * * All smoothing functions within Chartist are factory functions that accept an options parameter. The cardinal interpolation function accepts one configuration parameter `tension`, between 0 and 1, which controls the smoothing intensity. * * @example * ```ts * const chart = new LineChart('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [[1, 2, 8, 1, 7]] * }, { * lineSmooth: Interpolation.cardinal({ * tension: 1, * fillHoles: false * }) * }); * ``` * * @param options The options of the cardinal factory function. */ export function cardinal(options?: CardinalInterpolationOptions) { const finalOptions = { tension: 1, fillHoles: false, ...options }; const t = Math.min(1, Math.max(0, finalOptions.tension)); const c = 1 - t; return function cardinalInterpolation( pathCoordinates: number[], valueData: SegmentData[] ): SvgPath { // First we try to split the coordinates into segments // This is necessary to treat "holes" in line charts const segments = splitIntoSegments(pathCoordinates, valueData, { fillHoles: finalOptions.fillHoles }); if (!segments.length) { // If there were no segments return 'none' interpolation return none()([], []); } else if (segments.length > 1) { // If the split resulted in more that one segment we need to interpolate each segment individually and join them // afterwards together into a single path. // For each segment we will recurse the cardinal function // Join the segment path data into a single path and return return SvgPath.join( segments.map(segment => cardinalInterpolation(segment.pathCoordinates, segment.valueData) ) ); } else { // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first // segment pathCoordinates = segments[0].pathCoordinates; valueData = segments[0].valueData; // If less than two points we need to fallback to no smoothing if (pathCoordinates.length <= 4) { return none()(pathCoordinates, valueData); } const path = new SvgPath().move( pathCoordinates[0], pathCoordinates[1], false, valueData[0] ); const z = false; for ( let i = 0, iLen = pathCoordinates.length; iLen - 2 * Number(!z) > i; i += 2 ) { const p = [ { x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1] }, { x: +pathCoordinates[i], y: +pathCoordinates[i + 1] }, { x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3] }, { x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5] } ]; if (z) { if (!i) { p[0] = { x: +pathCoordinates[iLen - 2], y: +pathCoordinates[iLen - 1] }; } else if (iLen - 4 === i) { p[3] = { x: +pathCoordinates[0], y: +pathCoordinates[1] }; } else if (iLen - 2 === i) { p[2] = { x: +pathCoordinates[0], y: +pathCoordinates[1] }; p[3] = { x: +pathCoordinates[2], y: +pathCoordinates[3] }; } } else { if (iLen - 4 === i) { p[3] = p[2]; } else if (!i) { p[0] = { x: +pathCoordinates[i], y: +pathCoordinates[i + 1] }; } } path.curve( (t * (-p[0].x + 6 * p[1].x + p[2].x)) / 6 + c * p[2].x, (t * (-p[0].y + 6 * p[1].y + p[2].y)) / 6 + c * p[2].y, (t * (p[1].x + 6 * p[2].x - p[3].x)) / 6 + c * p[2].x, (t * (p[1].y + 6 * p[2].y - p[3].y)) / 6 + c * p[2].y, p[2].x, p[2].y, false, valueData[(i + 2) / 2] ); } return path; } }; } ================================================ FILE: src/interpolation/index.ts ================================================ export * from './none'; export * from './simple'; export * from './step'; export * from './cardinal'; export * from './monotoneCubic'; ================================================ FILE: src/interpolation/monotoneCubic.ts ================================================ import type { SegmentData } from '../core'; import { splitIntoSegments } from '../core'; import { SvgPath } from '../svg'; import { none } from './none'; export interface MonotoneCubicInterpolationOptions { fillHoles?: boolean; } /** * Monotone Cubic spline interpolation produces a smooth curve which preserves monotonicity. Unlike cardinal splines, the curve will not extend beyond the range of y-values of the original data points. * * Monotone Cubic splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`. * * The x-values of subsequent points must be increasing to fit a Monotone Cubic spline. If this condition is not met for a pair of adjacent points, then there will be a break in the curve between those data points. * * All smoothing functions within Chartist are factory functions that accept an options parameter. * * @example * ```ts * const chart = new LineChart('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [[1, 2, 8, 1, 7]] * }, { * lineSmooth: Interpolation.monotoneCubic({ * fillHoles: false * }) * }); * ``` * * @param options The options of the monotoneCubic factory function. */ export function monotoneCubic(options?: MonotoneCubicInterpolationOptions) { const finalOptions = { fillHoles: false, ...options }; return function monotoneCubicInterpolation( pathCoordinates: number[], valueData: SegmentData[] ): SvgPath { // First we try to split the coordinates into segments // This is necessary to treat "holes" in line charts const segments = splitIntoSegments(pathCoordinates, valueData, { fillHoles: finalOptions.fillHoles, increasingX: true }); if (!segments.length) { // If there were no segments return 'Chartist.Interpolation.none' return none()([], []); } else if (segments.length > 1) { // If the split resulted in more that one segment we need to interpolate each segment individually and join them // afterwards together into a single path. // For each segment we will recurse the monotoneCubic fn function // Join the segment path data into a single path and return return SvgPath.join( segments.map(segment => monotoneCubicInterpolation(segment.pathCoordinates, segment.valueData) ) ); } else { // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first // segment pathCoordinates = segments[0].pathCoordinates; valueData = segments[0].valueData; // If less than three points we need to fallback to no smoothing if (pathCoordinates.length <= 4) { return none()(pathCoordinates, valueData); } const xs = []; const ys = []; const n = pathCoordinates.length / 2; const ms = []; const ds = []; const dys = []; const dxs = []; // Populate x and y coordinates into separate arrays, for readability for (let i = 0; i < n; i++) { xs[i] = pathCoordinates[i * 2]; ys[i] = pathCoordinates[i * 2 + 1]; } // Calculate deltas and derivative for (let i = 0; i < n - 1; i++) { dys[i] = ys[i + 1] - ys[i]; dxs[i] = xs[i + 1] - xs[i]; ds[i] = dys[i] / dxs[i]; } // Determine desired slope (m) at each point using Fritsch-Carlson method // See: http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation ms[0] = ds[0]; ms[n - 1] = ds[n - 2]; for (let i = 1; i < n - 1; i++) { if (ds[i] === 0 || ds[i - 1] === 0 || ds[i - 1] > 0 !== ds[i] > 0) { ms[i] = 0; } else { ms[i] = (3 * (dxs[i - 1] + dxs[i])) / ((2 * dxs[i] + dxs[i - 1]) / ds[i - 1] + (dxs[i] + 2 * dxs[i - 1]) / ds[i]); if (!isFinite(ms[i])) { ms[i] = 0; } } } // Now build a path from the slopes const path = new SvgPath().move(xs[0], ys[0], false, valueData[0]); for (let i = 0; i < n - 1; i++) { path.curve( // First control point xs[i] + dxs[i] / 3, ys[i] + (ms[i] * dxs[i]) / 3, // Second control point xs[i + 1] - dxs[i] / 3, ys[i + 1] - (ms[i + 1] * dxs[i]) / 3, // End point xs[i + 1], ys[i + 1], false, valueData[i + 1] ); } return path; } }; } ================================================ FILE: src/interpolation/none.ts ================================================ import type { SegmentData } from '../core'; import { getMultiValue } from '../core'; import { SvgPath } from '../svg'; export interface NoneInterpolationOptions { fillHoles?: boolean; } /** * This interpolation function does not smooth the path and the result is only containing lines and no curves. * * @example * ```ts * const chart = new LineChart('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [[1, 2, 8, 1, 7]] * }, { * lineSmooth: Interpolation.none({ * fillHoles: false * }) * }); * ``` */ export function none(options?: NoneInterpolationOptions) { const finalOptions = { fillHoles: false, ...options }; return function noneInterpolation( pathCoordinates: number[], valueData: SegmentData[] ) { const path = new SvgPath(); let hole = true; for (let i = 0; i < pathCoordinates.length; i += 2) { const currX = pathCoordinates[i]; const currY = pathCoordinates[i + 1]; const currData = valueData[i / 2]; if (getMultiValue(currData.value) !== undefined) { if (hole) { path.move(currX, currY, false, currData); } else { path.line(currX, currY, false, currData); } hole = false; } else if (!finalOptions.fillHoles) { hole = true; } } return path; }; } ================================================ FILE: src/interpolation/simple.ts ================================================ import type { SegmentData } from '../core/types'; import { SvgPath } from '../svg'; export interface SimpleInteractionOptions { divisor?: number; fillHoles?: boolean; } /** * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing. * * Simple smoothing can be used instead of `Chartist.Smoothing.cardinal` if you'd like to get rid of the artifacts it produces sometimes. Simple smoothing produces less flowing lines but is accurate by hitting the points and it also doesn't swing below or above the given data point. * * All smoothing functions within Chartist are factory functions that accept an options parameter. The simple interpolation function accepts one configuration parameter `divisor`, between 1 and ∞, which controls the smoothing characteristics. * * @example * ```ts * const chart = new LineChart('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [[1, 2, 8, 1, 7]] * }, { * lineSmooth: Interpolation.simple({ * divisor: 2, * fillHoles: false * }) * }); * ``` * * @param options The options of the simple interpolation factory function. */ export function simple(options?: SimpleInteractionOptions) { const finalOptions = { divisor: 2, fillHoles: false, ...options }; const d = 1 / Math.max(1, finalOptions.divisor); return function simpleInterpolation( pathCoordinates: number[], valueData: SegmentData[] ) { const path = new SvgPath(); let prevX = 0; let prevY = 0; let prevData; for (let i = 0; i < pathCoordinates.length; i += 2) { const currX = pathCoordinates[i]; const currY = pathCoordinates[i + 1]; const length = (currX - prevX) * d; const currData = valueData[i / 2]; if (currData.value !== undefined) { if (prevData === undefined) { path.move(currX, currY, false, currData); } else { path.curve( prevX + length, prevY, currX - length, currY, currX, currY, false, currData ); } prevX = currX; prevY = currY; prevData = currData; } else if (!finalOptions.fillHoles) { prevX = prevY = 0; prevData = undefined; } } return path; }; } ================================================ FILE: src/interpolation/step.ts ================================================ import type { SegmentData } from '../core'; import { SvgPath } from '../svg'; export interface StepInterpolationOptions { postpone?: boolean; fillHoles?: boolean; } /** * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the `showPoint` option is enabled. * * All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter `postpone`, that can be `true` or `false`. The default value is `true` and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to `false`. * * @example * ```ts * const chart = new Chartist.Line('.ct-chart', { * labels: [1, 2, 3, 4, 5], * series: [[1, 2, 8, 1, 7]] * }, { * lineSmooth: Interpolation.step({ * postpone: true, * fillHoles: false * }) * }); * ``` */ export function step(options?: StepInterpolationOptions) { const finalOptions = { postpone: true, fillHoles: false, ...options }; return function stepInterpolation( pathCoordinates: number[], valueData: SegmentData[] ) { const path = new SvgPath(); let prevX = 0; let prevY = 0; let prevData; for (let i = 0; i < pathCoordinates.length; i += 2) { const currX = pathCoordinates[i]; const currY = pathCoordinates[i + 1]; const currData = valueData[i / 2]; // If the current point is also not a hole we can draw the step lines if (currData.value !== undefined) { if (prevData === undefined) { path.move(currX, currY, false, currData); } else { if (finalOptions.postpone) { // If postponed we should draw the step line with the value of the previous value path.line(currX, prevY, false, prevData); } else { // If not postponed we should draw the step line with the value of the current value path.line(prevX, currY, false, currData); } // Line to the actual point (this should only be a Y-Axis movement path.line(currX, currY, false, currData); } prevX = currX; prevY = currY; prevData = currData; } else if (!finalOptions.fillHoles) { prevX = prevY = 0; prevData = undefined; } } return path; }; } ================================================ FILE: src/styles/_settings.scss ================================================ @use "sass:math"; // Scales for responsive SVG containers $ct-scales: ((1), math.div(15, 16), math.div(8, 9), math.div(5, 6), math.div(4, 5), math.div(3, 4), math.div(2, 3), math.div(5, 8), math.div(1, 1.618), math.div(3, 5), math.div(9, 16), math.div(8, 15), math.div(1, 2), math.div(2, 5), math.div(3, 8), math.div(1, 3), math.div(1, 4)) !default; $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; // Class names to be used when generating CSS $ct-class-chart: ct-chart !default; $ct-class-chart-line: ct-chart-line !default; $ct-class-chart-bar: ct-chart-bar !default; $ct-class-horizontal-bars: ct-horizontal-bars !default; $ct-class-chart-pie: ct-chart-pie !default; $ct-class-chart-donut: ct-chart-donut !default; $ct-class-label: ct-label !default; $ct-class-series: ct-series !default; $ct-class-line: ct-line !default; $ct-class-point: ct-point !default; $ct-class-area: ct-area !default; $ct-class-bar: ct-bar !default; $ct-class-slice-pie: ct-slice-pie !default; $ct-class-slice-donut: ct-slice-donut !default; $ct-class-grid: ct-grid !default; $ct-class-grid-background: ct-grid-background !default; $ct-class-vertical: ct-vertical !default; $ct-class-horizontal: ct-horizontal !default; $ct-class-start: ct-start !default; $ct-class-end: ct-end !default; // Container ratio $ct-container-ratio: math.div(1, 1.618) !default; // Text styles for labels $ct-text-color: rgba(0, 0, 0, 0.4) !default; $ct-text-size: 0.75rem !default; $ct-text-align: flex-start !default; $ct-text-justify: flex-start !default; $ct-text-line-height: 1 !default; // Grid styles $ct-grid-color: rgba(0, 0, 0, 0.2) !default; $ct-grid-dasharray: 2px !default; $ct-grid-width: 1px !default; $ct-grid-background-fill: none !default; // Line chart properties $ct-line-width: 4px !default; $ct-line-dasharray: false !default; $ct-point-size: 10px !default; // Line chart point, can be either round or square $ct-point-shape: round !default; // Area fill transparency between 0 and 1 $ct-area-opacity: 0.1 !default; // Bar chart bar width $ct-bar-width: 10px !default; // Donut width (If donut width is to big it can cause issues where the shape gets distorted) $ct-donut-width: 60px !default; // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you // should set this property to false $ct-include-classes: true !default; // If this is set to true the CSS will contain colored series. You can extend or change the color with the // properties below $ct-include-colored-series: $ct-include-classes !default; // If set to true this will include all responsive container variations using the scales defined at the top of the script $ct-include-alternative-responsive-containers: $ct-include-classes !default; // Series names and colors. This can be extended or customized as desired. Just add more series and colors. $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; $ct-series-colors: ( #d70206, #f05b4f, #f4c63d, #d17905, #453d3f, #59922b, #0544d3, #6b0392, #e6805e, #dda458, #eacf7d, #86797d, #b2c326, #6188e2, #a748ca ) !default; ================================================ FILE: src/styles/index.scss ================================================ @import "settings"; @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { display: block; position: relative; width: $width; &:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: $ratio * 100%; } &:after { content: ""; display: table; clear: both; } > svg { display: block; position: absolute; top: 0; left: 0; } } @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { align-items: $ct-text-align; justify-content: $ct-text-justify; // Fallback to text-align for non-flex browsers @if ($ct-text-justify == 'flex-start') { text-align: left; } @else if ($ct-text-justify == 'flex-end') { text-align: right; } @else { text-align: center; } } @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { fill: $ct-text-color; color: $ct-text-color; font-size: $ct-text-size; line-height: $ct-text-line-height; } @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { stroke: $ct-grid-color; stroke-width: $ct-grid-width; @if ($ct-grid-dasharray) { stroke-dasharray: $ct-grid-dasharray; } } @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { stroke-width: $ct-point-size; stroke-linecap: $ct-point-shape; } @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { fill: none; stroke-width: $ct-line-width; @if ($ct-line-dasharray) { stroke-dasharray: $ct-line-dasharray; } } @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { stroke: none; fill-opacity: $ct-area-opacity; } @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { fill: none; stroke-width: $ct-bar-width; } @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { fill: none; stroke-width: $ct-donut-width; } @mixin ct-chart-series-color($color) { .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { stroke: $color; } .#{$ct-class-slice-pie}, .#{$ct-class-area} { fill: $color; } } @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { .#{$ct-class-label} { @include ct-chart-label($ct-text-color, $ct-text-size); } .#{$ct-class-chart-line} .#{$ct-class-label}, .#{$ct-class-chart-bar} .#{$ct-class-label} { display: flex; } .#{$ct-class-chart-pie} .#{$ct-class-label}, .#{$ct-class-chart-donut} .#{$ct-class-label} { dominant-baseline: central; } .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { @include ct-align-justify(flex-end, flex-start); } .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { @include ct-align-justify(flex-start, flex-start); } .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { @include ct-align-justify(flex-end, flex-end); } .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { @include ct-align-justify(flex-end, flex-start); } .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { @include ct-align-justify(flex-end, center); } .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { @include ct-align-justify(flex-start, center); } .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { @include ct-align-justify(flex-end, flex-start); } .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { @include ct-align-justify(flex-start, flex-start); } .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { @include ct-align-justify(center, flex-end); } .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { @include ct-align-justify(center, flex-start); } .#{$ct-class-grid} { @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); } .#{$ct-class-grid-background} { fill: $ct-grid-background-fill; } .#{$ct-class-point} { @include ct-chart-point($ct-point-size, $ct-point-shape); } .#{$ct-class-line} { @include ct-chart-line($ct-line-width); } .#{$ct-class-area} { @include ct-chart-area(); } .#{$ct-class-bar} { @include ct-chart-bar($ct-bar-width); } .#{$ct-class-slice-donut} { @include ct-chart-donut($ct-donut-width); } @if $ct-include-colored-series { @for $i from 0 to length($ct-series-names) { .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { $color: nth($ct-series-colors, $i + 1); @include ct-chart-series-color($color); } } } } @if $ct-include-classes { @include ct-chart(); @if $ct-include-alternative-responsive-containers { @for $i from 0 to length($ct-scales-names) { .#{nth($ct-scales-names, $i + 1)} { @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); } } } } ================================================ FILE: src/svg/Svg.spec.ts ================================================ import { Svg } from './Svg'; import { namespaces } from '../core'; describe('Svg', () => { it('should create a valid svg dom element', () => { const svg = new Svg('svg'); expect(svg).toBeDefined(); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().nodeName.toLowerCase()).toBe('svg'); }); it('should create a valid svg dom element with attributes', () => { const svg = new Svg('svg', { width: '100%', height: '100%' }); expect(svg).toBeDefined(); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().nodeName.toLowerCase()).toBe('svg'); expect(svg.getNode()).toHaveAttribute('width', '100%'); expect(svg.getNode()).toHaveAttribute('height', '100%'); }); it('should create nested objects with attributes', () => { const svg = new Svg('svg'); svg.elem('g').elem('g').elem('circle', { cx: 100, cy: 100, r: 10 }); expect(svg.getNode()).toBeDefined(); expect( svg.getNode().firstElementChild?.firstElementChild?.firstElementChild ).toBeDefined(); expect( svg .getNode() .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute( 'cx' ) ).toBe('100'); expect( svg .getNode() .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute( 'cy' ) ).toBe('100'); expect( svg .getNode() .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute( 'r' ) ).toBe('10'); }); it('should allow to set attributes manually', () => { const svg = new Svg('svg'); svg.elem('circle').attr({ cx: 100, cy: 100, r: 10 }); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().firstElementChild).toBeDefined(); expect(svg.getNode().firstElementChild?.getAttribute('cx')).toBe('100'); expect(svg.getNode().firstElementChild?.getAttribute('cy')).toBe('100'); expect(svg.getNode().firstElementChild?.getAttribute('r')).toBe('10'); }); it('should allow to set namespaced attributes', () => { const svg = new Svg('image'); svg.elem('image').attr({ x: 100, y: 100, height: 100, width: 100, 'xlink:href': 'image.jpg' }); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().firstElementChild).toBeDefined(); expect(svg.getNode().firstElementChild).toHaveAttribute('x', '100'); expect(svg.getNode().firstElementChild).toHaveAttribute('y', '100'); expect(svg.getNode().firstElementChild).toHaveAttribute('width', '100'); expect(svg.getNode().firstElementChild).toHaveAttribute('height', '100'); expect( svg.getNode().firstElementChild?.getAttributeNS(namespaces.xlink, 'href') ).toBe('image.jpg'); }); it('should clear on each nesting level', () => { const svg = new Svg('svg'); const group = svg.elem('g'); group.elem('circle'); group.elem('circle'); group.elem('circle'); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().firstElementChild?.childNodes.length).toBe(3); group.empty(); expect(svg.getNode().firstElementChild?.childNodes.length).toBe(0); svg.empty(); expect(svg.getNode()).toBeEmptyDOMElement(); }); it('should allow to remove a certain element', () => { const svg = new Svg('svg'); const text = svg.elem('text'); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().childNodes.length).toBe(1); expect(svg.getNode().firstElementChild?.nodeName.toLowerCase()).toBe( 'text' ); text.remove(); expect(svg.getNode().childNodes.length).toBe(0); }); it('should allow to write text content into elements', () => { const svg = new Svg('svg'); svg.elem('text').text('Hello World'); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().childNodes.length).toBe(1); expect(svg.getNode().firstElementChild?.nodeName.toLowerCase()).toBe( 'text' ); expect(svg.getNode().firstElementChild?.firstChild?.nodeType).toBe(3); expect(svg.getNode().firstElementChild?.firstChild).toHaveTextContent( 'Hello World' ); }); it('should allow to add and remove classes on elements', () => { const svg = new Svg('svg') .addClass('test-class-1') .addClass('test-class-2') // Should not allow duplicates .addClass('test-class-2') // Should allow multiple classes with white spaces .addClass('test-class-3 test-class-4'); expect(svg.getNode()).toBeDefined(); expect(svg.getNode().getAttribute('class')?.split(' ')).toEqual([ 'test-class-1', 'test-class-2', 'test-class-3', 'test-class-4' ]); svg.removeClass('test-class-1'); // Should allow multiple classes with whitespaces svg.removeClass('test-class-2 test-class-3'); expect(svg.getNode()).toHaveAttribute('class', 'test-class-4'); }); it('should allow to travers up in the fluent API chain and set attributes on the way', () => { const svg = new Svg('svg'); svg .elem('g') .elem('g') .elem('g') .elem('circle') .parent() ?.attr({ transform: 'rotate(10 10 10)' }) .parent() ?.attr({ transform: 'rotate(20 20 20)' }) .parent() ?.attr({ transform: 'rotate(30 30 30)' }) .parent() ?.attr({ width: '100%', height: '100%' }); expect(svg.getNode()).toBeDefined(); expect(svg.getNode()).toHaveAttribute('width', '100%'); expect(svg.getNode()).toHaveAttribute('height', '100%'); expect(svg.getNode().firstElementChild).toBeDefined(); expect(svg.getNode().firstElementChild?.getAttribute('transform')).toBe( 'rotate(30 30 30)' ); expect(svg.getNode().firstElementChild?.firstElementChild).toBeDefined(); expect( svg .getNode() .firstElementChild?.firstElementChild?.getAttribute('transform') ).toBe('rotate(20 20 20)'); expect( svg.getNode().firstElementChild?.firstElementChild?.firstElementChild ).toBeDefined(); expect( svg .getNode() .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute( 'transform' ) ).toBe('rotate(10 10 10)'); }); }); ================================================ FILE: src/svg/Svg.ts ================================================ import type { EventEmitter } from '../event'; import { namespaces } from '../core/constants'; import type { Attributes, AnimationDefinition } from './types'; import { SvgList } from './SvgList'; import { createAnimation, easings } from './animation'; /** * Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them. */ export class Svg { /** * @todo Only there for chartist <1 compatibility. Remove after deprecation warining. * @deprecated Use the animation module export `easings` directly. */ static readonly Easing = easings; private _node: Element; /** * @param name The name of the SVG element to create or an SVG dom element which should be wrapped into Svg * @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. * @param className This class or class list will be added to the SVG element * @param parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child * @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element */ constructor( name: string | Element, attributes?: Attributes, className?: string, parent?: Svg, insertFirst = false ) { // If Svg is getting called with an SVG element we just return the wrapper if (name instanceof Element) { this._node = name; } else { this._node = document.createElementNS(namespaces.svg, name); // If this is an SVG element created then custom namespace if (name === 'svg') { this.attr({ 'xmlns:ct': namespaces.ct }); } } if (attributes) { this.attr(attributes); } if (className) { this.addClass(className); } if (parent) { if (insertFirst && parent._node.firstChild) { parent._node.insertBefore(this._node, parent._node.firstChild); } else { parent._node.appendChild(this._node); } } } /** * Set attributes on the current SVG element of the wrapper you're currently working on. * @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value. * @param ns If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object. * @return The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function. */ attr(attributes: string, ns?: string): string | null; attr(attributes: Attributes): this; attr(attributes: string | Attributes, ns?: string) { if (typeof attributes === 'string') { if (ns) { return this._node.getAttributeNS(ns, attributes); } else { return this._node.getAttribute(attributes); } } Object.keys(attributes).forEach(key => { // If the attribute value is undefined we can skip this one if (attributes[key] === undefined) { return; } if (key.indexOf(':') !== -1) { const namespacedAttribute = key.split(':'); this._node.setAttributeNS( namespaces[namespacedAttribute[0]], key, String(attributes[key]) ); } else { this._node.setAttribute(key, String(attributes[key])); } }); return this; } /** * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily. * @param name The name of the SVG element that should be created as child element of the currently selected element wrapper * @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. * @param className This class or class list will be added to the SVG element * @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element * @return Returns a Svg wrapper object that can be used to modify the containing SVG data */ elem( name: string, attributes?: Attributes, className?: string, insertFirst = false ) { return new Svg(name, attributes, className, this, insertFirst); } /** * Returns the parent Chartist.SVG wrapper object * @return Returns a Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null. */ parent() { return this._node.parentNode instanceof SVGElement ? new Svg(this._node.parentNode) : null; } /** * This method returns a Svg wrapper around the root SVG element of the current tree. * @return The root SVG element wrapped in a Svg element */ root() { let node = this._node; while (node.nodeName !== 'svg') { if (node.parentElement) { node = node.parentElement; } else { break; } } return new Svg(node); } /** * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Svg wrapper. * @param selector A CSS selector that is used to query for child SVG elements * @return The SVG wrapper for the element found or null if no element was found */ querySelector(selector: string) { const foundNode = this._node.querySelector(selector); return foundNode ? new Svg(foundNode) : null; } /** * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Svg.List wrapper. * @param selector A CSS selector that is used to query for child SVG elements * @return The SVG wrapper list for the element found or null if no element was found */ querySelectorAll(selector: string) { const foundNodes = this._node.querySelectorAll(selector); return new SvgList(foundNodes); } /** * Returns the underlying SVG node for the current element. */ getNode() { return this._node as T; } /** * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM. * @param content The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject * @param attributes An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added. * @param className This class or class list will be added to the SVG element * @param insertFirst Specifies if the foreignObject should be inserted as first child * @return New wrapper object that wraps the foreignObject element */ foreignObject( content: string | Node, attributes?: Attributes, className?: string, insertFirst = false ) { let contentNode: Node; // If content is string then we convert it to DOM // TODO: Handle case where content is not a string nor a DOM Node if (typeof content === 'string') { const container = document.createElement('div'); container.innerHTML = content; contentNode = container.firstChild as Node; } else { contentNode = content; } if (contentNode instanceof Element) { // Adding namespace to content element contentNode.setAttribute('xmlns', namespaces.xmlns); } // Creating the foreignObject without required extension attribute (as described here // http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement) const fnObj = this.elem( 'foreignObject', attributes, className, insertFirst ); // Add content to foreignObjectElement fnObj._node.appendChild(contentNode); return fnObj; } /** * This method adds a new text element to the current Svg wrapper. * @param t The text that should be added to the text element that is created * @return The same wrapper object that was used to add the newly created element */ text(t: string) { this._node.appendChild(document.createTextNode(t)); return this; } /** * This method will clear all child nodes of the current wrapper object. * @return The same wrapper object that got emptied */ empty() { while (this._node.firstChild) { this._node.removeChild(this._node.firstChild); } return this; } /** * This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure. * @return The parent wrapper object of the element that got removed */ remove() { this._node.parentNode?.removeChild(this._node); return this.parent(); } /** * This method will replace the element with a new element that can be created outside of the current DOM. * @param newElement The new Svg object that will be used to replace the current wrapper object * @return The wrapper of the new element */ replace(newElement: Svg) { this._node.parentNode?.replaceChild(newElement._node, this._node); return newElement; } /** * This method will append an element to the current element as a child. * @param element The Svg element that should be added as a child * @param insertFirst Specifies if the element should be inserted as first child * @return The wrapper of the appended object */ append(element: Svg, insertFirst = false) { if (insertFirst && this._node.firstChild) { this._node.insertBefore(element._node, this._node.firstChild); } else { this._node.appendChild(element._node); } return this; } /** * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further. * @return A list of classes or an empty array if there are no classes on the current element */ classes() { const classNames = this._node.getAttribute('class'); return classNames ? classNames.trim().split(/\s+/) : []; } /** * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once. * @param names A white space separated list of class names * @return The wrapper of the current element */ addClass(names: string) { this._node.setAttribute( 'class', this.classes() .concat(names.trim().split(/\s+/)) .filter(function (elem, pos, self) { return self.indexOf(elem) === pos; }) .join(' ') ); return this; } /** * Removes one or a space separated list of classes from the current element. * @param names A white space separated list of class names * @return The wrapper of the current element */ removeClass(names: string) { const removedClasses = names.trim().split(/\s+/); this._node.setAttribute( 'class', this.classes() .filter(name => removedClasses.indexOf(name) === -1) .join(' ') ); return this; } /** * Removes all classes from the current element. * @return The wrapper of the current element */ removeAllClasses() { this._node.setAttribute('class', ''); return this; } /** * Get element height using `clientHeight` * @return The elements height in pixels */ height() { return this._node.clientHeight; } /** * Get element width using `clientWidth` * @return The elements width in pixels */ width() { return this._node.clientWidth; } /** * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Svg.Easing` or an array with four numbers specifying a cubic Bézier curve. * **An animations object could look like this:** * ```javascript * element.animate({ * opacity: { * dur: 1000, * from: 0, * to: 1 * }, * x1: { * dur: '1000ms', * from: 100, * to: 200, * easing: 'easeOutQuart' * }, * y1: { * dur: '2s', * from: 0, * to: 100 * } * }); * ``` * **Automatic unit conversion** * For the `dur` and the `begin` animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds. * **Guided mode** * The default behavior of SMIL animations with offset using the `begin` attribute is that the attribute will keep it's original value until the animation starts. Mostly this behavior is not desired as you'd like to have your element attributes already initialized with the animation `from` value even before the animation starts. Also if you don't specify `fill="freeze"` on an animate element or if you delete the animation after it's done (which is done in guided mode) the attribute will switch back to the initial value. This behavior is also not desired when performing simple one-time animations. For one-time animations you'd want to trigger animations immediately instead of relative to the document begin time. That's why in guided mode Svg will also use the `begin` property to schedule a timeout and manually start the animation after the timeout. If you're using multiple SMIL definition objects for an attribute (in an array), guided mode will be disabled for this attribute, even if you explicitly enabled it. * If guided mode is enabled the following behavior is added: * - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation * - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation) * - The animate element will be forced to use `fill="freeze"` * - The animation will be triggered with `beginElement()` in a timeout where `begin` of the definition object is interpreted in milli seconds. If no `begin` was specified the timeout is triggered immediately. * - After the animation the element attribute value will be set to the `to` value of the animation * - The animate element is deleted from the DOM * @param animations An animations object where the property keys are the attributes you'd like to animate. The properties should be objects again that contain the SMIL animation attributes (usually begin, dur, from, and to). The property begin and dur is auto converted (see Automatic unit conversion). You can also schedule multiple animations for the same attribute by passing an Array of SMIL definition objects. Attributes that contain an array of SMIL definition objects will not be executed in guided mode. * @param guided Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated. * @param eventEmitter If specified, this event emitter will be notified when an animation starts or ends. * @return The current element where the animation was added */ animate( animations: Record, guided = true, eventEmitter?: EventEmitter ) { Object.keys(animations).forEach(attribute => { const attributeAnimation = animations[attribute]; // If current attribute is an array of definition objects we create an animate for each and disable guided mode if (Array.isArray(attributeAnimation)) { attributeAnimation.forEach(animationDefinition => createAnimation( this, attribute, animationDefinition, false, eventEmitter ) ); } else { createAnimation( this, attribute, attributeAnimation, guided, eventEmitter ); } }); return this; } } ================================================ FILE: src/svg/SvgList.ts ================================================ import { Svg } from './Svg'; type SvgMethods = Exclude< keyof Svg, | 'constructor' | 'parent' | 'querySelector' | 'querySelectorAll' | 'replace' | 'append' | 'classes' | 'height' | 'width' >; type SvgListMethods = { [method in SvgMethods]: (...args: Parameters) => SvgList; }; /** * This helper class is to wrap multiple `Svg` elements into a list where you can call the `Svg` functions on all elements in the list with one call. This is helpful when you'd like to perform calls with `Svg` on multiple elements. * An instance of this class is also returned by `Svg.querySelectorAll`. */ export class SvgList implements SvgListMethods { private svgElements: Svg[] = []; /** * @param nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll) */ constructor(nodeList: ArrayLike) { for (let i = 0; i < nodeList.length; i++) { this.svgElements.push(new Svg(nodeList[i])); } } private call(method: T, args: Parameters) { this.svgElements.forEach(element => Reflect.apply(element[method], element, args) ); return this; } attr(...args: Parameters) { return this.call('attr', args); } elem(...args: Parameters) { return this.call('elem', args); } root(...args: Parameters) { return this.call('root', args); } getNode(...args: Parameters) { return this.call('getNode', args); } foreignObject(...args: Parameters) { return this.call('foreignObject', args); } text(...args: Parameters) { return this.call('text', args); } empty(...args: Parameters) { return this.call('empty', args); } remove(...args: Parameters) { return this.call('remove', args); } addClass(...args: Parameters) { return this.call('addClass', args); } removeClass(...args: Parameters) { return this.call('removeClass', args); } removeAllClasses(...args: Parameters) { return this.call('removeAllClasses', args); } animate(...args: Parameters) { return this.call('animate', args); } } ================================================ FILE: src/svg/SvgPath.spec.ts ================================================ import { SvgPath } from './SvgPath'; describe('Svg', () => { describe('SvgPath', () => { it('should handle position updates correctly', () => { const path: any = new SvgPath(); expect(path.position()).toBe(0); expect(path.position(100).position()).toBe(0); expect(path.position(-1).position()).toBe(0); path.pathElements = [1, 2, 3]; expect(path.position(100).position()).toBe(3); }); it('should add absolute and relative path elements correctly', () => { const path: any = new SvgPath() .move(1, 2) .move(3, 4, true) .line(5, 6) .line(7, 8, true) .curve(9, 10, 11, 12, 13, 14) .curve(15, 16, 17, 18, 19, 20, true); expect(path.pathElements.length).toBe(6); expect(path.pathElements).toEqual([ { command: 'M', x: 1, y: 2 }, { command: 'm', x: 3, y: 4 }, { command: 'L', x: 5, y: 6 }, { command: 'l', x: 7, y: 8 }, { command: 'C', x1: 9, y1: 10, x2: 11, y2: 12, x: 13, y: 14 }, { command: 'c', x1: 15, y1: 16, x2: 17, y2: 18, x: 19, y: 20 } ]); }); it('should insert new elements at correct position', () => { const path: any = new SvgPath() .move(1, 2) .move(7, 8) .move(9, 10) .position(1) .move(3, 4) .move(5, 6) .position(100000) .move(11, 12) .position(-100000) .move(-1, 0); expect(path.pathElements.length).toBe(7); expect(path.pathElements).toEqual([ { command: 'M', x: -1, y: 0 }, { command: 'M', x: 1, y: 2 }, { command: 'M', x: 3, y: 4 }, { command: 'M', x: 5, y: 6 }, { command: 'M', x: 7, y: 8 }, { command: 'M', x: 9, y: 10 }, { command: 'M', x: 11, y: 12 } ]); }); it('should stringify simple shape correctly', () => { const path = new SvgPath(true) .move(10, 10) .line(10, 100) .line(100, 100) .line(100, 10); expect(path.stringify()).toEqual('M10,10L10,100L100,100L100,10Z'); }); it('should stringify with configured precision', () => { const path = new SvgPath(false, { accuracy: 2 }) .move(10.12345, 10.14345) .line(10.14545, 10) .line(10.14000000645, 10.3333333333); expect(path.stringify()).toEqual('M10.12,10.14L10.15,10L10.14,10.33'); }); it('should parse Chartist SVG path style correctly', () => { const path = new SvgPath().parse('M10,10L10,100L100,100L100,10'); expect(path.stringify()).toEqual('M10,10L10,100L100,100L100,10'); }); it('should parse MDN SVG path style correctly', () => { const path = new SvgPath().parse( 'M10 10 L 10 100 L 100 100 L 100 10 C 1 1, 1 1, 1 1' ); expect(path.stringify()).toEqual( 'M10,10L10,100L100,100L100,10C1,1,1,1,1,1' ); }); it('should parse path with closing command', () => { const path = new SvgPath().parse( 'M10 10 L 10 100 L 100 100 L 100 10 C 1 1, 1 1, 1 1 Z' ); expect(path.stringify()).toEqual( 'M10,10L10,100L100,100L100,10C1,1,1,1,1,1' ); }); it('should parse complex path correctly', () => { const path = new SvgPath(false, { accuracy: 0 }).parse( 'M7.566371681415929,313.5870318472049L15.132743362831858,322.1479887268699L22.699115044247787,292.49058976570063L30.265486725663717,284.9469379116152L37.83185840707964,277.62070141556273L45.39823008849557,285.4043086222666L52.9646017699115,295.16905806058617L60.530973451327434,288.5395967440654L68.09734513274336,282.3023155078293L75.66371681415929,276.9420221519757L83.23008849557522,271.31296300227655L90.79646017699115,273.1827546735411L98.36283185840708,282.72148250847295L105.929203539823,276.55760703185683L113.49557522123892,278.16318930715545L121.06194690265487,279.67913384762466L128.6283185840708,296.53529757775897L136.1946902654867,324.4003397770142L143.76106194690263,317.1376004332516L151.32743362831857,323.3390406432677L158.89380530973452,328.5597479599146L166.46017699115043,329.67851354926904L174.02654867256635,327.71837583373326L181.5929203539823,335.05972598190976L189.15929203539824,334.29372633331286L196.72566371681415,332.68724934321176L204.29203539823007,330.6752327006325L211.858407079646,325.971917329413L219.42477876106196,328.13057177790404L226.99115044247785,309.6546479835954L234.5575221238938,310.6637826993739L242.12389380530973,310.65221523366176L249.69026548672568,318.40285733188773L257.2566371681416,298.18154267575227L264.8230088495575,307.4788389000347L272.3893805309734,304.189264255087L279.95575221238937,289.0288876874009L287.52212389380526,300.20654714775424L295.0884955752212,298.0164127652739L302.65486725663715,287.69192345832175L310.2212389380531,293.1860711045035L317.78761061946904,300.4760502113585L325.3539823008849,297.94852206276937L332.92035398230087,305.6594311405378L340.4867256637168,306.7859423144216L348.0530973451327,275.68998851331963L355.61946902654864,286.5550640745874L363.1858407079646,288.4952543187362L370.75221238938053,290.1896066608983L378.3185840707965,277.8447927515142L385.88495575221236,282.46018876596827L393.4513274336283,261.617847596371L401.01769911504425,265.06101027918726L408.58407079646014,264.60492966286677L416.1504424778761,252.35288845280365L423.716814159292,239.29220756750195L431.283185840708,229.73170018586225L438.8495575221239,224.1580859168795L446.41592920353986,217.20551113129414L453.9823008849557,212.63435660265037L461.54867256637164,210.4425212857057L469.1150442477876,201.0077146146342L476.6814159292035,182.3934004122068L484.24778761061947,176.98732946386616L491.8141592920354,175.3660655079267L499.38053097345136,181.1589144624976L506.9469026548673,172.81581557677976L514.5132743362832,177.82343674256106L522.079646017699,183.5573714672562L529.646017699115,184.4980688436067L537.2123893805309,201.60789339862924L544.7787610619469,193.42268767053048L552.3451327433628,209.9219909677575L559.9115044247787,221.1318944868172L567.4778761061947,222.47350026973174L575.0442477876105,229.94061399967882L582.6106194690265,213.57676800697396L590.1769911504424,232.97280246785252L597.7433628318583,232.8915724787845L605.3097345132743,231.486089735319L612.8761061946902,234.26534000120475L620.4424778761062,219.90951817170736L628.0088495575221,214.36149678900725L635.5752212389381,204.7245641444236L643.1415929203539,205.04759319834227L650.7079646017698,178.61624621480792L658.2743362831858,174.30656351022486L665.8407079646017,194.06864637030463L673.4070796460177,191.38404795482728L680.9734513274336,188.88380371217903L688.5398230088496,182.47430260433697L696.1061946902654,192.70175438596493L703.6725663716813,182.37945067166908L711.2389380530973,163.80499447227572L718.8053097345132,157.4839718811134L726.3716814159292,149.57403342725343L733.9380530973451,142.6076734278762L741.5044247787611,144.9954413314636L749.070796460177,152.29112878815386L756.637168141593,150.02544379977235L764.2035398230088,139.40203164917125L771.7699115044247,149.22935357717972L779.3362831858407,155.78116263659354L786.9026548672566,145.09966219897575L794.4690265486726,157.52407467202426L802.0353982300885,147.01645902195105L809.6017699115044,141.8658056183404L817.1681415929203,134.36135158737966L824.7345132743362,127.49269525433283L832.3008849557522,120.25886939571154L839.8672566371681,118.26230310074709L847.433628318584,98.76959064327474' ); expect(path.stringify()).toEqual( 'M7.566371681415929,313.5870318472049L15.132743362831858,322.1479887268699L22.699115044247787,292.49058976570063L30.265486725663717,284.9469379116152L37.83185840707964,277.62070141556273L45.39823008849557,285.4043086222666L52.9646017699115,295.16905806058617L60.530973451327434,288.5395967440654L68.09734513274336,282.3023155078293L75.66371681415929,276.9420221519757L83.23008849557522,271.31296300227655L90.79646017699115,273.1827546735411L98.36283185840708,282.72148250847295L105.929203539823,276.55760703185683L113.49557522123892,278.16318930715545L121.06194690265487,279.67913384762466L128.6283185840708,296.53529757775897L136.1946902654867,324.4003397770142L143.76106194690263,317.1376004332516L151.32743362831857,323.3390406432677L158.89380530973452,328.5597479599146L166.46017699115043,329.67851354926904L174.02654867256635,327.71837583373326L181.5929203539823,335.05972598190976L189.15929203539824,334.29372633331286L196.72566371681415,332.68724934321176L204.29203539823007,330.6752327006325L211.858407079646,325.971917329413L219.42477876106196,328.13057177790404L226.99115044247785,309.6546479835954L234.5575221238938,310.6637826993739L242.12389380530973,310.65221523366176L249.69026548672568,318.40285733188773L257.2566371681416,298.18154267575227L264.8230088495575,307.4788389000347L272.3893805309734,304.189264255087L279.95575221238937,289.0288876874009L287.52212389380526,300.20654714775424L295.0884955752212,298.0164127652739L302.65486725663715,287.69192345832175L310.2212389380531,293.1860711045035L317.78761061946904,300.4760502113585L325.3539823008849,297.94852206276937L332.92035398230087,305.6594311405378L340.4867256637168,306.7859423144216L348.0530973451327,275.68998851331963L355.61946902654864,286.5550640745874L363.1858407079646,288.4952543187362L370.75221238938053,290.1896066608983L378.3185840707965,277.8447927515142L385.88495575221236,282.46018876596827L393.4513274336283,261.617847596371L401.01769911504425,265.06101027918726L408.58407079646014,264.60492966286677L416.1504424778761,252.35288845280365L423.716814159292,239.29220756750195L431.283185840708,229.73170018586225L438.8495575221239,224.1580859168795L446.41592920353986,217.20551113129414L453.9823008849557,212.63435660265037L461.54867256637164,210.4425212857057L469.1150442477876,201.0077146146342L476.6814159292035,182.3934004122068L484.24778761061947,176.98732946386616L491.8141592920354,175.3660655079267L499.38053097345136,181.1589144624976L506.9469026548673,172.81581557677976L514.5132743362832,177.82343674256106L522.079646017699,183.5573714672562L529.646017699115,184.4980688436067L537.2123893805309,201.60789339862924L544.7787610619469,193.42268767053048L552.3451327433628,209.9219909677575L559.9115044247787,221.1318944868172L567.4778761061947,222.47350026973174L575.0442477876105,229.94061399967882L582.6106194690265,213.57676800697396L590.1769911504424,232.97280246785252L597.7433628318583,232.8915724787845L605.3097345132743,231.486089735319L612.8761061946902,234.26534000120475L620.4424778761062,219.90951817170736L628.0088495575221,214.36149678900725L635.5752212389381,204.7245641444236L643.1415929203539,205.04759319834227L650.7079646017698,178.61624621480792L658.2743362831858,174.30656351022486L665.8407079646017,194.06864637030463L673.4070796460177,191.38404795482728L680.9734513274336,188.88380371217903L688.5398230088496,182.47430260433697L696.1061946902654,192.70175438596493L703.6725663716813,182.37945067166908L711.2389380530973,163.80499447227572L718.8053097345132,157.4839718811134L726.3716814159292,149.57403342725343L733.9380530973451,142.6076734278762L741.5044247787611,144.9954413314636L749.070796460177,152.29112878815386L756.637168141593,150.02544379977235L764.2035398230088,139.40203164917125L771.7699115044247,149.22935357717972L779.3362831858407,155.78116263659354L786.9026548672566,145.09966219897575L794.4690265486726,157.52407467202426L802.0353982300885,147.01645902195105L809.6017699115044,141.8658056183404L817.1681415929203,134.36135158737966L824.7345132743362,127.49269525433283L832.3008849557522,120.25886939571154L839.8672566371681,118.26230310074709L847.433628318584,98.76959064327474' ); }); it('should scale path along both axes', () => { const path: any = new SvgPath() .move(1, 2) .line(3, 4) .curve(5, 6, 7, 8, 9, 10) .scale(10, 100); expect(path.pathElements).toEqual([ { command: 'M', x: 10, y: 200 }, { command: 'L', x: 30, y: 400 }, { command: 'C', x1: 50, y1: 600, x2: 70, y2: 800, x: 90, y: 1000 } ]); }); it('should translate path along both axes', () => { const path: any = new SvgPath() .move(1, 2) .line(3, 4) .curve(5, 6, 7, 8, 9, 10) .translate(10, 100); expect(path.pathElements).toEqual([ { command: 'M', x: 11, y: 102 }, { command: 'L', x: 13, y: 104 }, { command: 'C', x1: 15, y1: 106, x2: 17, y2: 108, x: 19, y: 110 } ]); }); it('should transform path correctly with custom function', () => { const path: any = new SvgPath() .move(1, 2) .line(3, 4) .curve(5, 6, 7, 8, 9, 10) .transform((_element, paramName, _elementIndex, paramIndex) => { if (paramIndex > 3) { return 0; } else if (String(paramName)[0] === 'y') { return 100; } return undefined; }); expect(path.pathElements).toEqual([ { command: 'M', x: 1, y: 100 }, { command: 'L', x: 3, y: 100 }, { command: 'C', x1: 5, y1: 100, x2: 7, y2: 100, x: 0, y: 0 } ]); }); it('should split correctly by move command', () => { const paths: any = new SvgPath() .parse('M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0') .splitByCommand('M'); expect(paths.length).toBe(2); expect(paths[0].pathElements[0].command).toBe('M'); expect(paths[0].pathElements.length).toBe(4); expect(paths[1].pathElements[0].command).toBe('M'); expect(paths[1].pathElements.length).toBe(4); }); it('should split correctly by move command and tailing move element', () => { const paths: any = new SvgPath() .parse('M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0M0,0') .splitByCommand('M'); expect(paths.length).toBe(3); expect(paths[2].pathElements[0].command).toBe('M'); }); it('should split correctly by move command and leading other commands', () => { const paths: any = new SvgPath() .parse('L0,0C0,0,0,0,0,0M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0') .splitByCommand('M'); expect(paths.length).toBe(3); expect(paths[0].pathElements.length).toBe(2); expect(paths[0].pathElements[0].command).toBe('L'); expect(paths[0].pathElements[1].command).toBe('C'); expect(paths[1].pathElements.length).toBe(4); expect(paths[1].pathElements[0].command).toBe('M'); }); it('should correctly parse negative values', () => { const paths: any = new SvgPath().parse('M-10,10L-100,-100'); expect(paths.pathElements.length).toBe(2); expect(paths.pathElements[0].command).toBe('M'); expect(paths.pathElements[1].command).toBe('L'); expect(paths.pathElements[0].x).toBe(-10); expect(paths.pathElements[0].y).toBe(10); expect(paths.pathElements[1].x).toBe(-100); expect(paths.pathElements[1].y).toBe(-100); }); }); }); ================================================ FILE: src/svg/SvgPath.ts ================================================ import type { SegmentData } from '../core'; import type { SvgPathOptions, PathCommand, PathParams } from './types'; /** * Contains the descriptors of supported element types in a SVG path. Currently only move, line and curve are supported. */ const elementDescriptions: Record = { m: ['x', 'y'], l: ['x', 'y'], c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'], a: ['rx', 'ry', 'xAr', 'lAf', 'sf', 'x', 'y'] }; /** * Default options for newly created SVG path objects. */ const defaultOptions = { // The accuracy in digit count after the decimal point. This will be used to round numbers in the SVG path. If this option is set to false then no rounding will be performed. accuracy: 3 }; function element( command: string, params: PathParams, pathElements: PathCommand[], pos: number, relative: boolean, data?: SegmentData ) { const pathElement: PathCommand = { command: relative ? command.toLowerCase() : command.toUpperCase(), ...params, ...(data ? { data } : {}) }; pathElements.splice(pos, 0, pathElement); } function forEachParam( pathElements: PathCommand[], cb: ( cmd: PathCommand, param: keyof T, cmdIndex: number, paramIndex: number, cmds: PathCommand[] ) => void ) { pathElements.forEach((pathElement, pathElementIndex) => { elementDescriptions[pathElement.command.toLowerCase()].forEach( (paramName, paramIndex) => { cb( pathElement, paramName as keyof PathParams, pathElementIndex, paramIndex, pathElements ); } ); }); } export class SvgPath { /** * This static function on `SvgPath` is joining multiple paths together into one paths. * @param paths A list of paths to be joined together. The order is important. * @param close If the newly created path should be a closed path * @param options Path options for the newly created path. */ static join(paths: SvgPath[], close = false, options?: SvgPathOptions) { const joinedPath = new SvgPath(close, options); for (let i = 0; i < paths.length; i++) { const path = paths[i]; for (let j = 0; j < path.pathElements.length; j++) { joinedPath.pathElements.push(path.pathElements[j]); } } return joinedPath; } pathElements: PathCommand[] = []; private pos = 0; private options: Required; /** * Used to construct a new path object. * @param close If set to true then this path will be closed when stringified (with a Z at the end) * @param options Options object that overrides the default objects. See default options for more details. */ constructor(private readonly close = false, options?: SvgPathOptions) { this.options = { ...defaultOptions, ...options }; } /** * Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor. * @param pos If a number is passed then the cursor is set to this position in the path element array. * @return If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned. */ position(pos: number): this; position(): number; position(pos?: number) { if (pos !== undefined) { this.pos = Math.max(0, Math.min(this.pathElements.length, pos)); return this; } else { return this.pos; } } /** * Removes elements from the path starting at the current position. * @param count Number of path elements that should be removed from the current position. * @return The current path object for easy call chaining. */ remove(count: number) { this.pathElements.splice(this.pos, count); return this; } /** * Use this function to add a new move SVG path element. * @param x The x coordinate for the move element. * @param y The y coordinate for the move element. * @param relative If set to true the move element will be created with relative coordinates (lowercase letter) * @param data Any data that should be stored with the element object that will be accessible in pathElement * @return The current path object for easy call chaining. */ move(x: number, y: number, relative = false, data?: SegmentData) { element( 'M', { x: +x, y: +y }, this.pathElements, this.pos++, relative, data ); return this; } /** * Use this function to add a new line SVG path element. * @param x The x coordinate for the line element. * @param y The y coordinate for the line element. * @param relative If set to true the line element will be created with relative coordinates (lowercase letter) * @param data Any data that should be stored with the element object that will be accessible in pathElement * @return The current path object for easy call chaining. */ line(x: number, y: number, relative = false, data?: SegmentData) { element( 'L', { x: +x, y: +y }, this.pathElements, this.pos++, relative, data ); return this; } /** * Use this function to add a new curve SVG path element. * @param x1 The x coordinate for the first control point of the bezier curve. * @param y1 The y coordinate for the first control point of the bezier curve. * @param x2 The x coordinate for the second control point of the bezier curve. * @param y2 The y coordinate for the second control point of the bezier curve. * @param x The x coordinate for the target point of the curve element. * @param y The y coordinate for the target point of the curve element. * @param relative If set to true the curve element will be created with relative coordinates (lowercase letter) * @param data Any data that should be stored with the element object that will be accessible in pathElement * @return The current path object for easy call chaining. */ curve( x1: number, y1: number, x2: number, y2: number, x: number, y: number, relative = false, data?: SegmentData ) { element( 'C', { x1: +x1, y1: +y1, x2: +x2, y2: +y2, x: +x, y: +y }, this.pathElements, this.pos++, relative, data ); return this; } /** * Use this function to add a new non-bezier curve SVG path element. * @param rx The radius to be used for the x-axis of the arc. * @param ry The radius to be used for the y-axis of the arc. * @param xAr Defines the orientation of the arc * @param lAf Large arc flag * @param sf Sweep flag * @param x The x coordinate for the target point of the curve element. * @param y The y coordinate for the target point of the curve element. * @param relative If set to true the curve element will be created with relative coordinates (lowercase letter) * @param data Any data that should be stored with the element object that will be accessible in pathElement * @return The current path object for easy call chaining. */ arc( rx: number, ry: number, xAr: number, lAf: number, sf: number, x: number, y: number, relative = false, data?: SegmentData ) { element( 'A', { rx, ry, xAr, lAf, sf, x, y }, this.pathElements, this.pos++, relative, data ); return this; } /** * Parses an SVG path seen in the d attribute of path elements, and inserts the parsed elements into the existing path object at the current cursor position. Any closing path indicators (Z at the end of the path) will be ignored by the parser as this is provided by the close option in the options of the path object. * @param path Any SVG path that contains move (m), line (l) or curve (c) components. * @return The current path object for easy call chaining. */ parse(path: string) { // Parsing the SVG path string into an array of arrays [['M', '10', '10'], ['L', '100', '100']] const chunks = path .replace(/([A-Za-z])(-?[0-9])/g, '$1 $2') .replace(/([0-9])([A-Za-z])/g, '$1 $2') .split(/[\s,]+/) .reduce((result, pathElement) => { if (pathElement.match(/[A-Za-z]/)) { result.push([]); } result[result.length - 1].push(pathElement); return result; }, []); // If this is a closed path we remove the Z at the end because this is determined by the close option if (chunks[chunks.length - 1][0].toUpperCase() === 'Z') { chunks.pop(); } // Using svgPathElementDescriptions to map raw path arrays into objects that contain the command and the parameters // For example {command: 'M', x: '10', y: '10'} const elements = chunks.map(chunk => { const command = chunk.shift() as string; const description = elementDescriptions[command.toLowerCase()]; return { command, ...description.reduce>( (result, paramName, index) => { result[paramName] = +chunk[index]; return result; }, {} ) } as PathCommand; }); // Preparing a splice call with the elements array as var arg params and insert the parsed elements at the current position this.pathElements.splice(this.pos, 0, ...elements); // Increase the internal position by the element count this.pos += elements.length; return this; } /** * This function renders to current SVG path object into a final SVG string that can be used in the d attribute of SVG path elements. It uses the accuracy option to round big decimals. If the close parameter was set in the constructor of this path object then a path closing Z will be appended to the output string. */ stringify() { const accuracyMultiplier = Math.pow(10, this.options.accuracy); return ( this.pathElements.reduce((path, pathElement) => { const params = elementDescriptions[ pathElement.command.toLowerCase() ].map(paramName => { const value = pathElement[paramName as keyof PathCommand] as number; return this.options.accuracy ? Math.round(value * accuracyMultiplier) / accuracyMultiplier : value; }); return path + pathElement.command + params.join(','); }, '') + (this.close ? 'Z' : '') ); } /** * Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate. * @param x The number which will be used to scale the x, x1 and x2 of all path elements. * @param y The number which will be used to scale the y, y1 and y2 of all path elements. * @return The current path object for easy call chaining. */ scale(x: number, y: number) { forEachParam(this.pathElements, (pathElement, paramName) => { pathElement[paramName] *= paramName[0] === 'x' ? x : y; }); return this; } /** * Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate. * @param x The number which will be used to translate the x, x1 and x2 of all path elements. * @param y The number which will be used to translate the y, y1 and y2 of all path elements. * @return The current path object for easy call chaining. */ translate(x: number, y: number) { forEachParam(this.pathElements, (pathElement, paramName) => { pathElement[paramName] += paramName[0] === 'x' ? x : y; }); return this; } /** * This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path. * The method signature of the callback function looks like this: * ```javascript * function(pathElement, paramName, pathElementIndex, paramIndex, pathElements) * ``` * If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate. * @param transformFnc The callback function for the transformation. Check the signature in the function description. * @return The current path object for easy call chaining. */ transform( transformFnc: ( cmd: PathCommand, param: keyof T, cmdIndex: number, paramIndex: number, cmds: PathCommand[] ) => number | void ) { forEachParam( this.pathElements, (pathElement, paramName, pathElementIndex, paramIndex, pathElements) => { const transformed = transformFnc( pathElement, paramName, pathElementIndex, paramIndex, pathElements ); if (transformed || transformed === 0) { pathElement[paramName] = transformed; } } ); return this; } /** * This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned. * @param close Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used. */ clone(close = false) { const clone = new SvgPath(close || this.close); clone.pos = this.pos; clone.pathElements = this.pathElements .slice() .map(pathElement => ({ ...pathElement })); clone.options = { ...this.options }; return clone; } /** * Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings. * @param command The command you'd like to use to split the path */ splitByCommand(command: string) { const split = [new SvgPath()]; this.pathElements.forEach(pathElement => { if ( pathElement.command === command.toUpperCase() && split[split.length - 1].pathElements.length !== 0 ) { split.push(new SvgPath()); } split[split.length - 1].pathElements.push(pathElement); }); return split; } } ================================================ FILE: src/svg/animation.ts ================================================ import type { EventEmitter } from '../event'; import { ensureUnit, quantity } from '../core/lang'; import type { Attributes, AnimationDefinition, AnimationEvent } from './types'; import type { Svg } from './Svg'; /** * This Object contains some standard easing cubic bezier curves. * Then can be used with their name in the `Svg.animate`. * You can also extend the list and use your own name in the `animate` function. * Click the show code button to see the available bezier functions. */ export const easings = { easeInSine: [0.47, 0, 0.745, 0.715], easeOutSine: [0.39, 0.575, 0.565, 1], easeInOutSine: [0.445, 0.05, 0.55, 0.95], easeInQuad: [0.55, 0.085, 0.68, 0.53], easeOutQuad: [0.25, 0.46, 0.45, 0.94], easeInOutQuad: [0.455, 0.03, 0.515, 0.955], easeInCubic: [0.55, 0.055, 0.675, 0.19], easeOutCubic: [0.215, 0.61, 0.355, 1], easeInOutCubic: [0.645, 0.045, 0.355, 1], easeInQuart: [0.895, 0.03, 0.685, 0.22], easeOutQuart: [0.165, 0.84, 0.44, 1], easeInOutQuart: [0.77, 0, 0.175, 1], easeInQuint: [0.755, 0.05, 0.855, 0.06], easeOutQuint: [0.23, 1, 0.32, 1], easeInOutQuint: [0.86, 0, 0.07, 1], easeInExpo: [0.95, 0.05, 0.795, 0.035], easeOutExpo: [0.19, 1, 0.22, 1], easeInOutExpo: [1, 0, 0, 1], easeInCirc: [0.6, 0.04, 0.98, 0.335], easeOutCirc: [0.075, 0.82, 0.165, 1], easeInOutCirc: [0.785, 0.135, 0.15, 0.86], easeInBack: [0.6, -0.28, 0.735, 0.045], easeOutBack: [0.175, 0.885, 0.32, 1.275], easeInOutBack: [0.68, -0.55, 0.265, 1.55] }; export function createAnimation( element: Svg, attribute: string, animationDefinition: AnimationDefinition, createGuided = false, eventEmitter?: EventEmitter ) { const { easing, ...def } = animationDefinition; const attributeProperties: Attributes = {}; let animationEasing; let timeout; // Check if an easing is specified in the definition object and delete it from the object as it will not // be part of the animate element attributes. if (easing) { // If already an easing Bézier curve array we take it or we lookup a easing array in the Easing object animationEasing = Array.isArray(easing) ? easing : easings[easing]; } // If numeric dur or begin was provided we assume milli seconds def.begin = ensureUnit(def.begin, 'ms'); def.dur = ensureUnit(def.dur, 'ms'); if (animationEasing) { def.calcMode = 'spline'; def.keySplines = animationEasing.join(' '); def.keyTimes = '0;1'; } // Adding "fill: freeze" if we are in guided mode and set initial attribute values if (createGuided) { def.fill = 'freeze'; // Animated property on our element should already be set to the animation from value in guided mode attributeProperties[attribute] = def.from; element.attr(attributeProperties); // In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin // which needs to be in ms aside timeout = quantity(def.begin || 0).value; def.begin = 'indefinite'; } const animate = element.elem('animate', { attributeName: attribute, ...def }); if (createGuided) { // If guided we take the value that was put aside in timeout and trigger the animation manually with a timeout setTimeout(() => { // If beginElement fails we set the animated attribute to the end position and remove the animate element // This happens if the SMIL ElementTimeControl interface is not supported or any other problems occurred in // the browser. (Currently FF 34 does not support animate elements in foreignObjects) try { // @ts-expect-error Try legacy API. animate._node.beginElement(); } catch (err) { // Set animated attribute to current animated value attributeProperties[attribute] = def.to; element.attr(attributeProperties); // Remove the animate element as it's no longer required animate.remove(); } }, timeout); } const animateNode = animate.getNode(); if (eventEmitter) { animateNode.addEventListener('beginEvent', () => eventEmitter.emit('animationBegin', { element: element, animate: animateNode, params: animationDefinition }) ); } animateNode.addEventListener('endEvent', () => { if (eventEmitter) { eventEmitter.emit('animationEnd', { element: element, animate: animateNode, params: animationDefinition }); } if (createGuided) { // Set animated attribute to current animated value attributeProperties[attribute] = def.to; element.attr(attributeProperties); // Remove the animate element as it's no longer required animate.remove(); } }); } ================================================ FILE: src/svg/index.ts ================================================ export { easings } from './animation'; export * from './Svg'; export * from './SvgPath'; export * from './SvgList'; export * from './types'; ================================================ FILE: src/svg/types.ts ================================================ import type { SegmentData } from '../core'; import type { easings } from './animation'; import type { Svg } from './Svg'; export interface BasePathParams { x: number; y: number; } export type MoveParams = BasePathParams; export type LineParams = BasePathParams; export interface CurveParams extends BasePathParams { x1: number; y1: number; x2: number; y2: number; } export interface ArcParams extends BasePathParams { rx: number; ry: number; xAr: number; lAf: number; sf: number; } export type PathParams = MoveParams | LineParams | CurveParams | ArcParams; export type PathCommand = { command: string; data?: SegmentData; } & T; export interface SvgPathOptions { accuracy?: number; } export type Attributes = Record; export interface AnimationDefinition { id?: string; easing?: number[] | keyof typeof easings; calcMode?: 'discrete' | 'linear' | 'paced' | 'spline'; restart?: 'always' | 'whenNotActive' | 'never'; repeatCount?: number | 'indefinite'; repeatDur?: string | 'indefinite'; keySplines?: string; keyTimes?: string; fill?: string; min?: number | string; max?: number | string; begin?: number | string; end?: number | string; dur: number | string; from: number | string; to: number | string; } export interface AnimationEvent { element: Svg; animate: Element; params: AnimationDefinition; } ================================================ FILE: src/utils/extend.ts ================================================ /** * Simple recursive object extend * @param target Target object where the source will be merged into * @param sources This object (objects) will be merged into target and then target is returned * @return An object that has the same reference as target but is extended and merged with the properties of source */ export function extend(target: T): T; export function extend(target: T, a: A): T & A; export function extend(target: T, a: A, b: B): T & A & B; // eslint-disable-next-line @typescript-eslint/no-explicit-any export function extend(target: any = {}, ...sources: any[]) { for (let i = 0; i < sources.length; i++) { const source = sources[i]; const targetProto = Object.getPrototypeOf(target); for (const prop in source) { if (targetProto !== null && prop in targetProto) { continue; // prevent prototype pollution } const sourceProp = source[prop]; if ( typeof sourceProp === 'object' && sourceProp !== null && !(sourceProp instanceof Array) ) { target[prop] = extend(target[prop], sourceProp); } else { target[prop] = sourceProp; } } } return target; } ================================================ FILE: src/utils/functional.ts ================================================ /** * Helps to simplify functional style code * @param n This exact value will be returned by the noop function * @return The same value that was provided to the n parameter */ export const noop = (n: T) => n; /** * Functional style helper to produce array with given length initialized with undefined values */ export function times(length: number): undefined[]; export function times( length: number, filler: (index: number) => T ): T[]; export function times( length: number, filler?: (index: number) => T ) { return Array.from({ length }, filler ? (_, i) => filler(i) : () => void 0); } /** * Sum helper to be used in reduce functions */ export const sum = (previous: number, current: number) => previous + (current ? current : 0); /** * Map for multi dimensional arrays where their nested arrays will be mapped in serial. The output array will have the length of the largest nested array. The callback function is called with variable arguments where each argument is the nested array value (or undefined if there are no more values). * * For example: * @example * ```ts * const data = [[1, 2], [3], []]; * serialMap(data, cb); * * // where cb will be called 2 times * // 1. call arguments: (1, 3, undefined) * // 2. call arguments: (2, undefined, undefined) * ``` */ export const serialMap = (array: T[][], callback: (...args: T[]) => K) => times(Math.max(...array.map(element => element.length)), index => callback(...array.map(element => element[index])) ); ================================================ FILE: src/utils/index.ts ================================================ export * from './types'; export * from './extend'; export * from './functional'; export * from './utils'; ================================================ FILE: src/utils/types.ts ================================================ export type FilterByKey = T extends Record ? T : T extends Partial> ? T & { [key in K]: T[K] } : never; export type RequiredKeys = T & Required> & { [key in V]: Required }; ================================================ FILE: src/utils/utils.ts ================================================ import type { FilterByKey } from './types'; /** * This function safely checks if an objects has an owned property. * @param target The object where to check for a property * @param property The property name * @returns Returns true if the object owns the specified property */ export function safeHasProperty( target: T, property: K ): target is FilterByKey; export function safeHasProperty(target: unknown, property: string) { return ( target !== null && typeof target === 'object' && Reflect.has(target, property) ); } /** * Checks if a value can be safely coerced to a number. This includes all values except null which result in finite numbers when coerced. This excludes NaN, since it's not finite. */ export function isNumeric(value: number): true; export function isNumeric(value: unknown): boolean; export function isNumeric(value: unknown) { return value !== null && isFinite(value as number); } /** * Returns true on all falsey values except the numeric value 0. */ export function isFalseyButZero( value: unknown ): value is undefined | null | false | '' { return !value && value !== 0; } /** * Returns a number if the passed parameter is a valid number or the function will return undefined. On all other values than a valid number, this function will return undefined. */ export function getNumberOrUndefined(value: number): number; export function getNumberOrUndefined(value: unknown): number | undefined; export function getNumberOrUndefined(value: unknown) { return isNumeric(value) ? Number(value) : undefined; } /** * Checks if value is array of arrays or not. */ export function isArrayOfArrays(data: unknown): data is unknown[][] { if (!Array.isArray(data)) { return false; } return data.every(Array.isArray); } /** * Loop over array. */ export function each( list: T[], callback: (item: T, index: number, itemIndex: number) => void, reverse = false ) { let index = 0; list[reverse ? 'reduceRight' : 'reduce']( (_, item, itemIndex) => callback(item, index++, itemIndex), void 0 ); } ================================================ FILE: test/mock/cssModule.js ================================================ const mock = new Proxy( {}, { get() { return ''; } } ); module.exports = mock; ================================================ FILE: test/mock/dom.ts ================================================ export type Fixture = ReturnType; export let container: HTMLDivElement | null = null; const getBoundingClientRect = SVGElement.prototype.getBoundingClientRect; export function mockDom() { if (!container) { container = document.createElement('div'); container.setAttribute('data-fixture-container', `${+new Date()}`); document.body.appendChild(container); } } export function destroyMockDom() { if (container) { document.body.removeChild(container); container = null; } } export function addMockWrapper(fixture: string) { const wrapper = document.createElement('div'); wrapper.innerHTML += fixture; container?.appendChild(wrapper); return { wrapper, container, fixture }; } export function mockDomRects() { // @ts-expect-error Mock DOM API. SVGElement.prototype.getBoundingClientRect = () => ({ x: 0, y: 0, width: 500, height: 500, top: 0, right: 0, bottom: 0, left: 0 }); Object.defineProperties(SVGElement.prototype, { clientWidth: { configurable: true, get: () => 500 }, clientHeight: { configurable: true, get: () => 500 } }); } export function destroyMockDomRects() { SVGElement.prototype.getBoundingClientRect = getBoundingClientRect; // Redefine clientWidth and clientHeight properties from the prototype of SVGElement const ElementPrototype = Object.getPrototypeOf(SVGElement.prototype); Object.defineProperties(SVGElement.prototype, { clientWidth: Object.getOwnPropertyDescriptor( ElementPrototype, 'clientWidth' )!, clientHeight: Object.getOwnPropertyDescriptor( ElementPrototype, 'clientHeight' )! }); } ================================================ FILE: test/setup.js ================================================ import '@testing-library/jest-dom/extend-expect'; window.matchMedia = () => ({}); ================================================ FILE: test/storyshots.spec.js ================================================ import { skipable } from './utils/skipable'; import { initStoryshots } from './utils/storyshots'; const testTimeout = 60 * 1000 * 10; const config = { url: 'http://localhost:6006', setupTimeout: testTimeout, testTimeout, getGotoOptions() { return { waitUntil: 'networkidle0', timeout: 0 }; } }; const describeWhenLinux = skipable( describe, process.platform !== 'linux' || Boolean(process.env.STORYSHOTS_SKIP) ); describeWhenLinux('Storyshots', () => { initStoryshots(config); }); ================================================ FILE: test/utils/skipable.js ================================================ /** * Make block definition method skipable. * @param fn - Jest's block definition method. * @param skip - Skip test block. * @returns Skipable block definition methid. */ export function skipable(fn, skip) { return skip ? fn.skip : fn; } ================================================ FILE: test/utils/storyshots/imageSnapshotWithStoryParameters.js ================================================ import { devices } from 'puppeteer'; import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'; import { Viewport } from './viewport'; const captureRoot = true; const offset = '40'; /** * Handle story parameters. * @param page - Page instance. * @param options - Story options. * @returns Promise. */ async function beforeScreenshotHook(page, options) { const { storyshots: { currentViewport } = {}, parameters: { storyshots: { beforeScreenshot } = {} } } = options.context; if (currentViewport && currentViewport !== Viewport.Default) { await page.emulate(devices[currentViewport]); } if (beforeScreenshot) { await beforeScreenshot(page, options); } if (captureRoot) { await page.$eval( '#root', (root, offset) => { root.style.padding = `${offset}px`; }, offset ); return page.$('#root'); } return null; } function getCaptureRootScreenshotOptions() { return { encoding: 'base64', // encoding: 'base64' is a property required by puppeteer fullPage: !captureRoot }; } /** * Create snapshot tests function with story parameters. * @param config - Snapshots config. * @returns Snapshot tests function. */ export function imageSnapshotWithStoryParameters(config) { const { beforeScreenshot, getScreenshotOptions } = config; const configWithBeforeScreenshot = { ...config, getScreenshotOptions: getScreenshotOptions ? options => ({ ...getCaptureRootScreenshotOptions(options), ...getScreenshotOptions(options) }) : getCaptureRootScreenshotOptions, beforeScreenshot: beforeScreenshot ? async (page, options) => { const captureTarget = await beforeScreenshotHook(page, options); await beforeScreenshot(page, options); return captureTarget; } : beforeScreenshotHook }; const test = imageSnapshot(configWithBeforeScreenshot); const testFn = async options => { const { context } = options; const { storyshots: { viewports = [] } = {} } = context.parameters; if (!viewports.length) { await test(options); return; } for (const viewport of viewports) { const currentViewport = viewport === Viewport.Default ? undefined : viewport; const originalId = context.id; context.storyshots = { currentViewport }; await test(options); context.id = originalId; } expect.assertions(viewports.length); }; testFn.timeout = test.timeout; testFn.beforeAll = test.beforeAll; testFn.afterAll = test.afterAll; return testFn; } ================================================ FILE: test/utils/storyshots/index.js ================================================ export * from './initStoryshots'; export * from './imageSnapshotWithStoryParameters'; export * from './storybook'; ================================================ FILE: test/utils/storyshots/initStoryshots.js ================================================ import baseInitStoryshots from '@storybook/addon-storyshots'; import { imageSnapshotWithStoryParameters } from './imageSnapshotWithStoryParameters'; import { startStorybook } from './storybook'; /** * Default page customizer. * @param page - Puppeteer's page instance. * @returns Task promise. */ export function defaultCustomizePage(page) { return page.setViewport({ width: 1920, height: 1080 }); } /** * Prepare identifier for use in filename. * @param indentifierPart - Identifier string part. * @returns Sanitized identifier ready for use in filename. */ export function sanitizeSnapshotIdentifierPart(indentifierPart) { return indentifierPart.replace(/[\s/]|%20/g, '-').replace(/"|%22/g, ''); } /** * Default match options creator. * @param storyOptions - Story info. * @param storyOptions.context - Story context. * @param storyOptions.context.kind - Story kind. * @param storyOptions.context.story - Story name. * @param storyOptions.context.storyshots - Storyshots metadata. * @returns Match options. */ export function defaultGetMatchOptions({ context: { kind, story, storyshots } }) { const currentViewport = storyshots?.currentViewport; const sanitizedKind = sanitizeSnapshotIdentifierPart(kind); const sanitizedStory = sanitizeSnapshotIdentifierPart(story); const sanitizedParams = currentViewport ? `__${sanitizeSnapshotIdentifierPart(currentViewport)}` : ''; process.stdout.write(`📷 ${kind} ${story} ${currentViewport || ''}\n`); return { customSnapshotIdentifier: `${sanitizedKind}__${sanitizedStory}${sanitizedParams}` }; } /** * Initialize and run storyshots. * @param config - Storyshots config. */ export function initStoryshots(config) { process.env.STORYBOOK_STORYSHOTS = JSON.stringify(true); const finalOptions = { getMatchOptions: defaultGetMatchOptions, customizePage: defaultCustomizePage, ...config }; const storybook = startStorybook(config); const test = imageSnapshotWithStoryParameters({ storybookUrl: config.url, ...finalOptions }); const { beforeAll, afterAll } = test; const { warn } = console; test.beforeAll = async () => { await storybook.start(); await beforeAll(); }; test.beforeAll.timeout = beforeAll.timeout; test.afterAll = async () => { await storybook.stop(); await afterAll(); }; console.warn = () => undefined; baseInitStoryshots({ framework: 'html', suite: 'Storyshots', test }); console.warn = warn; } ================================================ FILE: test/utils/storyshots/storybook.js ================================================ import { spawn } from 'child_process'; import { createServer } from 'http-server'; import del from 'del'; const STORYBOOK_STATIC = 'storybook-static'; const errorMatcher = /ERR!|Error:|ERROR in|UnhandledPromiseRejectionWarning/; /** * Run storybook static build. * @param options - Build options. * @param [options.env] - Environment variables. * @param [options.verbose] - Print verbose messages. * @returns Build process promise. */ export async function buildStorybook({ env = {}, verbose = false }) { return new Promise((resolve, reject) => { const buildProcess = spawn('build-storybook', [], { cwd: process.cwd(), env: { ...process.env, NODE_ENV: 'production', ...env }, detached: true }); const onData = data => { const message = data.toString('utf8'); if (verbose) { process.stdout.write(message); } if (errorMatcher.test(message)) { reject(new Error(message)); } }; buildProcess.on('exit', (code, signal) => { if (code === 0) { resolve(); return; } reject(new Error(`Exit code: ${code || signal || 'unknown'}`)); }); buildProcess.stdout.on('data', onData); buildProcess.stderr.on('data', onData); }); } /** * Build static and start storybook server. * @param options - Storybook build and start options. * @returns Server controls. */ export function startStorybook(options) { const { url, skipBuild } = options; const parsedUrl = new URL(url); const server = createServer({ root: STORYBOOK_STATIC }); return { async start() { if (!skipBuild) { await buildStorybook(options); } await new Promise(resolve => { server.listen( parseInt(parsedUrl.port, 10), parsedUrl.hostname, resolve ); }); }, async stop() { server.close(); if (!skipBuild) { await del(STORYBOOK_STATIC); } } }; } ================================================ FILE: test/utils/storyshots/viewport.ts ================================================ export const Viewport = { Default: 'default', Mobile: 'iPhone X', MobileLandscape: 'iPhone X landscape', SmallMobile: 'iPhone SE', SmallMobileLandscape: 'iPhone SE landscape', Tablet: 'iPad', TabletLandscape: 'iPad landscape', SmallTablet: 'Nexus 7', SmallTabletLandscape: 'Nexus 7 landscape' }; ================================================ FILE: tsconfig.build.json ================================================ { "extends": "./tsconfig.json", "exclude": [ "**/*.stories.ts", "**/*.spec.ts" ] } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { /* Type Checking */ "strict": true, "strictBindCallApply": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noUnusedLocals": true, "noUnusedParameters": true, /* Modules */ "baseUrl": ".", "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "paths": { "chartist-dev": ["src"] }, /* Emit */ "declaration": true, "declarationMap": true, "inlineSourceMap": true, "outDir": "dist", /* Interop Constraints */ "allowSyntheticDefaultImports": true, "isolatedModules": true, /* Language and Environment */ "lib": [ "dom", "esnext" ], "target": "esnext", /* Completeness */ "skipLibCheck": true }, "include": [ "src" ] } ================================================ FILE: website/.gitignore ================================================ # Dependencies /node_modules # Production /build # Generated files .docusaurus .cache-loader # Misc .DS_Store .env.* npm-debug.log* ================================================ FILE: website/CNAME ================================================ chartist.js.org ================================================ FILE: website/README.md ================================================ # Website This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. ### Installation ``` $ pnpm install ``` ### Local Development ``` $ pnpm start ``` This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. ### Build ``` $ pnpm build ``` This command generates static content into the `build` directory and can be served using any static contents hosting service. ### Deployment ``` $ GIT_USER= USE_SSH=true pnpm deploy ``` If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. ================================================ FILE: website/babel.config.js ================================================ module.exports = { presets: [require.resolve('@docusaurus/core/lib/babel/preset')] }; ================================================ FILE: website/docs/api/.gitignore ================================================ * !.gitignore !docs.js !basics.md ================================================ FILE: website/docs/api/basics.md ================================================ --- slug: /api/basics description: List of Chartist basic APIs. --- # List of basic APIs: - Charts - [BarChart](/api/classes/BarChart) - [LineChart](/api/classes/LineChart) - [PieChart](/api/classes/PieChart) - Axes types - [AutoScaleAxis](/api/classes/AutoScaleAxis) - [FixedScaleAxis](/api/classes/FixedScaleAxis) - [StepAxis](/api/classes/StepAxis) - Svg wrappers - [Svg](/api/classes/Svg) - [SvgPath](/api/classes/SvgPath) - [SvgList](/api/classes/SvgList) - [Interpolation](/api/namespaces/Interpolation) - [EventEmitter](/api/classes/EventEmitter) ================================================ FILE: website/docs/api/docs.js ================================================ exports.docs = [ { title: 'Table of Contents', slug: '/api/basics' }, { title: 'BarChart', slug: '/api/classes/BarChart' }, { title: 'LineChart', slug: '/api/classes/LineChart' }, { title: 'PieChart', slug: '/api/classes/PieChart' }, { title: 'AutoScaleAxis', slug: '/api/classes/AutoScaleAxis' }, { title: 'FixedScaleAxis', slug: '/api/classes/FixedScaleAxis' }, { title: 'StepAxis', slug: '/api/classes/StepAxis' }, { title: 'Svg', slug: '/api/classes/Svg' }, { title: 'SvgPath', slug: '/api/classes/SvgPath' }, { title: 'SvgList', slug: '/api/classes/SvgList' }, { title: 'Interpolation', slug: '/api/namespaces/Interpolation' }, { title: 'EventEmitter', slug: '/api/classes/EventEmitter' } ]; ================================================ FILE: website/docs/docs.js ================================================ exports.docs = [ { title: "What's new in v1?", slug: '/docs/whats-new-in-v1' }, { title: 'What is it made for?', slug: '/docs/what-is-it-made-for' } ]; ================================================ FILE: website/docs/examples/bar-chart.mdx ================================================ --- description: Bar chart examples --- import ContextProvider from '../../src/components/ContextProvider'; # Bar chart examples ## Bi-polar bar chart {({ branch, theme }) => ( )} ## Distributed series {({ branch, theme }) => ( )} ## Extreme responsive configuration {({ branch, theme }) => ( )} ## Horizontal bar chart {({ branch, theme }) => ( )} ## Label placement {({ branch, theme }) => ( )} ## Multi-line labels {({ branch, theme }) => ( )} ## Overlapping bars on mobile {({ branch, theme }) => ( )} ## Stacked bar chart {({ branch, theme }) => ( )} ## Add peak circles using the draw events {({ branch, theme }) => ( )} ================================================ FILE: website/docs/examples/docs.js ================================================ exports.docs = [ { title: 'Bar Chart', slug: '/examples/bar-chart' }, { title: 'Line Chart', slug: '/examples/line-chart' }, { title: 'Pie Chart', slug: '/examples/pie-chart' } ]; ================================================ FILE: website/docs/examples/index.mdx ================================================ --- slug: /examples description: List of Chartist usage examples. --- import Link from '@docusaurus/Link'; import { docs } from './docs'; # Examples
    {docs.map(({ title, slug }, i) => (
  • {title}
    • ))}
================================================ FILE: website/docs/examples/line-chart.mdx ================================================ --- description: Line chart examples --- import ContextProvider from '../../src/components/ContextProvider'; # Line chart examples ## Line chart with area {({ branch, theme }) => ( )} ## Auto scale axis {({ branch, theme }) => ( )} ## Fixed and auto scale axis {({ branch, theme }) => ( )} ## Bi-polar Line chart with area only {({ branch, theme }) => ( )} ## Filled holes in data {({ branch, theme }) => ( )} ## Holes in data {({ branch, theme }) => ( )} ## Using events to replace graphics {({ branch, theme }) => ( )} ## Only whole numbers {({ branch, theme }) => ( )} ## SVG Path animation {({ branch, theme }) => ( )} ## Line scatter diagram with responsive settings {({ branch, theme }) => ( )} ## Series Overrides {({ branch, theme }) => ( )} ## Simple line chart {({ branch, theme }) => ( )} ## Simple responsive options {({ branch, theme }) => ( )} ## Line Interpolation / Smoothing {({ branch, theme }) => ( )} ## Simple SMIL Animations {({ branch, theme }) => ( )} ## Advanced SMIL Animations {({ branch, theme }) => ( )} ## Timeseries {({ branch, theme }) => ( )} ================================================ FILE: website/docs/examples/pie-chart.mdx ================================================ --- description: Pie chart examples --- import ContextProvider from '../../src/components/ContextProvider'; # Pie chart examples ## Pie chart with custom labels {({ branch, theme }) => ( )} ## Animating a Donut with Svg.animate {({ branch, theme }) => ( )} ## Donut chart {({ branch, theme }) => ( )} ## Simple pie chart {({ branch, theme }) => ( )} ## Gauge chart {({ branch, theme }) => ( )} ================================================ FILE: website/docs/index.mdx ================================================ --- slug: / description: A simple responsive charting library built with SVG --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import logoUrl from '@site/static/img/chartist-guy.gif'; # Big welcome by the Chartist Guy [![NPM version][npm]][npm-url] [![Downloads][downloads]][downloads-url] [![Build status][build]][build-url] [![Coverage status][coverage]][coverage-url] [![Bundle size][size]][size-url] [![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url] [npm]: https://img.shields.io/npm/v/chartist.svg [npm-url]: https://www.npmjs.com/package/chartist [downloads]: https://img.shields.io/npm/dm/chartist.svg [downloads-url]: https://www.npmjs.com/package/chartist [build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml [build-url]: https://github.com/chartist-js/chartist/actions [coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg [coverage-url]: https://app.codecov.io/gh/chartist-js/chartist [size]: https://img.shields.io/bundlephobia/minzip/chartist [size-url]: https://bundlephobia.com/package/chartist [chat]: https://badges.gitter.im/gionkunz/chartist-js.svg [chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

The Chartist Guy

Chartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either: - use the wrong technologies for illustration (canvas) - weighs hundreds of kilobytes - are not flexible enough while keeping the configuration simple - are not friendly to designers - more annoying things That's why we started Chartist and our goal is to solve all of the above issues. ## Quickstart Install this library using your favorite package manager: ```bash pnpm add chartist ``` ```bash yarn add chartist ``` ```bash npm install --save chartist ``` Then, just import chart you want and use it: ```js import { BarChart } from 'chartist'; new BarChart('#chart', { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [ [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] ] }, { high: 10, low: -10, axisX: { labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null) } }); ``` :::tip Need an API to fetch data? Please consider [Cube](https://cube.dev/?ref=eco-chartist), an open-source API for data apps. ::: [![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-chartist) ## Examples Please see [live examples](/examples). ## Getting Help Need help? Ask your question on [Gitter](https://gitter.im/gionkunz/chartist-js), [GitHub Discussions](https://github.com/chartist-js/chartist/discussions) or [Stack Overflow](https://stackoverflow.com/questions/tagged/chartist.js). If you've encountered an issue, please [file it on GitHub](https://github.com/chartist-js/chartist/issues). ================================================ FILE: website/docs/plugins.md ================================================ --- slug: /docs/plugins description: Plugins --- # Plugins Coming soon. ================================================ FILE: website/docs/what-is-it-made-for.md ================================================ --- slug: /docs/what-is-it-made-for description: What is Chartist made for? --- # What is it made for? Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves. Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts. ================================================ FILE: website/docs/whats-new-in-v1.md ================================================ --- slug: /docs/whats-new-in-v1 description: What's new in Chartist v1? --- # What's new in v1? ## ESM Now Chartist is truly an ES module and exposes its API through the exports, thus making Chartist [tree-shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). ### Migration from v0.11 - Each property of Chartist object now is named export. - Chart classes were renamed. - Easing object now is named export. ```js const Chartist = require('chartist') new Chartist.Bar(/* ... */); new Chartist.Line(/* ... */); new Chartist.Pie(/* ... */); new Chartist.Svg(/* ... */); Chartist.Svg.Easing // ... // -> import { BarChart, LineChart, PieChart, Svg, easings } from 'chartist' new BarChart(/* ... */) new LineChart(/* ... */) new PieChart(/* ... */) new Svg(/* ... */) easings // ... ``` ## TypeScript Chartist was rewritten and fully typed with TypeScript. ### Some of exposed types ```ts import type { BarChartData, BarChartOptions, LineChartData, LineChartOptions, PieChartData, PieChartOptions } from 'chartist' ``` ================================================ FILE: website/docusaurus.config.js ================================================ // @ts-check const branch = require('git-branch'); const codeTheme = require('./src/prism-theme'); const currentBranch = process.env.BRANCH || branch.sync(); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'Chartist', tagline: 'A simple responsive charting library built with SVG', url: 'https://chartist.dev', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.ico', trailingSlash: false, organizationName: 'chartist-js', projectName: 'chartist', noIndex: currentBranch !== 'main', customFields: { branch: currentBranch }, presets: [ [ '@docusaurus/preset-classic', /** @type {import('@docusaurus/preset-classic').Options} */ { docs: { routeBasePath: '/', sidebarPath: require.resolve('./sidebars.js'), editUrl: 'https://github.com/chartist-js/chartist/edit/main/website/' }, theme: { customCss: [ require.resolve('./src/css/custom.css'), require.resolve('./src/css/recoloring.css') ] } } ] ], themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ { navbar: { title: 'Chartist', logo: { alt: 'Chartist logo', src: 'img/logo.svg' }, items: [ { type: 'doc', docId: 'api/basics', position: 'left', label: 'API' }, { type: 'doc', docId: 'examples/index', position: 'left', label: 'Examples' }, { type: 'doc', docId: 'plugins', position: 'left', label: 'Plugins' }, { href: 'https://stackoverflow.com/questions/tagged/chartist.js', label: 'Stack Overflow', position: 'right' }, { href: 'https://gitter.im/gionkunz/chartist-js', label: 'Gitter', position: 'right' }, { href: 'https://github.com/chartist-js/chartist/discussions', label: 'Discussions', position: 'right' }, { href: 'https://github.com/chartist-js/chartist', label: 'GitHub', position: 'right' } ] }, colorMode: { defaultMode: 'light', disableSwitch: true, respectPrefersColorScheme: false }, prism: { theme: codeTheme } // algolia: { // appId: '', // apiKey: '', // indexName: '' // } }, plugins: [ [ 'docusaurus-plugin-typedoc', // Plugin / TypeDoc options { entryPoints: ['../src/index.ts'], tsconfig: '../tsconfig.json', excludeExternals: true, readme: 'none', sort: ['source-order'] } ] ] }; module.exports = config; ================================================ FILE: website/package.json ================================================ { "name": "website", "version": "0.0.0", "private": true, "scripts": { "docusaurus": "docusaurus", "start": "docusaurus start", "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", "typecheck": "tsc" }, "dependencies": { "@algolia/client-search": "^4.11.0", "@docusaurus/core": "2.0.0-beta.14", "@docusaurus/preset-classic": "2.0.0-beta.14", "@docusaurus/theme-search-algolia": "^2.0.0-beta.9", "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^6.0.0", "clsx": "^1.1.1", "file-loader": "^6.2.0", "git-branch": "^2.0.1", "prism-react-renderer": "^1.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", "url-loader": "^4.1.1" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.0.0-beta.14", "@tsconfig/docusaurus": "^1.0.4", "@types/react": "^17.0.36", "docusaurus-plugin-typedoc": "^0.17.4", "typedoc": "^0.23.0", "typedoc-plugin-markdown": "^3.12.1", "typescript": "^4.3.5", "webpack": "^5.64.2" }, "browserslist": { "production": [ ">0.5%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ================================================ FILE: website/sidebars.js ================================================ // @ts-check const { docs } = require('./docs/docs'); const { docs: api } = require('./docs/api/docs'); const { docs: examples } = require('./docs/examples/docs'); /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { docsSidebar: [ { type: 'doc', id: 'index', label: 'Quickstart' }, ...docs.map(({ slug, title }) => ({ /** @type {'doc'} */ type: 'doc', id: slug.replace('/docs/', ''), label: title })) ], apiSidebar: [ ...api.map(({ slug, title }) => ({ /** @type {'doc'} */ type: 'doc', id: slug.replace('/', ''), label: title })), { type: 'doc', id: 'api/index' } ], examplesSidebar: [ { type: 'doc', id: 'examples/index', label: 'Table of Contents' }, ...examples.map(({ slug, title }) => ({ /** @type {'doc'} */ type: 'doc', id: slug.replace('/', ''), label: title })) ] }; module.exports = sidebars; ================================================ FILE: website/src/components/ContextProvider.tsx ================================================ import { ReactNode } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useThemeContext from '@theme/hooks/useThemeContext'; interface IContext { branch: string; theme: 'light' | 'dark'; } export default function ContextProvider({ children, }: { children(context: IContext): ReactNode; }) { const ctx = useDocusaurusContext(); const { isDarkTheme } = useThemeContext(); const context = { branch: ctx.siteConfig.customFields.branch as string, theme: isDarkTheme ? ('dark' as const) : ('light' as const), }; return children(context); } ================================================ FILE: website/src/css/custom.css ================================================ /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #7a77ff; --ifm-color-primary-dark: #5552ff; --ifm-color-primary-darker: #433fff; --ifm-color-primary-darkest: #0c07ff; --ifm-color-primary-light: #9f9cff; --ifm-color-primary-lighter: #b1afff; --ifm-color-primary-lightest: #e8e7ff; --ifm-code-font-size: 95%; } .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.1); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); } html[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } .logo { float: right; } @media (max-width: 768px) { .logo { float: none; display: block; margin: 0 auto; } } ================================================ FILE: website/src/css/recoloring.css ================================================ /* palette */ :root { --brown-dark: #5B4421; --red: #D70205; --red_light: #F05B4F; --white-dirty: #F7F2E9; --white: #FFFFFF; --brown-light: #e3d8c3; --brown-lighter: #DFCFBB; --brown-ligher_a08: #f7f2e980; --brown-light_a02: rgba(68, 61, 63, 0.2); --brown-darken: #443D3F; --yellow: #f4c63e; --dark: #363133; --dark-01: #2e2929; --dark_03_a01: rgba(247, 242, 233, 0.1); --white_a02: rgba(255, 255, 255, 0.2); } :root[data-theme='light'] { --accent: var(--red); --text-primary: var(--brown-dark); --text-link: var(--red); --text_header: var(--white-dirty); --bg_main: var(--brown-light); --bg-highlithed: var(--brown-ligher_a08); --bg-header: var(--brown-darken); --bg_menu: var(--brown-lighter); --separator: var(--brown-light_a02); } :root[data-theme='dark'] { --accent: var(--red_light); --text-primary: var(--white); --text-link: var(--red_light); --separator: var(--white_a02); --text_header: var(--white-dirty); --bg_main: var(--dark-01); --bg-highlithed: var(--dark_03_a01); --bg-header: var(--brown-darken); --bg_menu: var(--dark); } html { background-color: var(--bg_main) !important; color: var(--text-primary) !important; } a { color: var(--text-link); } a:hover { color: var(--text-link); } /* nav */ .navbar { background-color: var(--bg-header); color: var(--text_header); } .navbar a { color: var(--white); } .menu__list-item a { color: var(--text-primary); } .navbar .navbar__link:hover, .navbar .navbar__brand:hover { color: var(--yellow); } .menu { background-color: var(--bg_menu); } .menu__link { color: var(--text-primary); } .menu__link:hover { color: var(--text-link); background-color: initial; } .menu__link.menu__link--active { background-color: var(--bg-highlithed); } .table-of-contents { border-left: 3px solid var(--separator); } .table-of-contents__link { color: inherit; } .table-of-contents__link:hover { color: var(--text-link); } .hash-link { text-decoration: none; } .hash-link:hover { text-decoration: underline currentColor; } .pagination-nav__link { border-color: var(--separator); transition: background-color 0.3s; } .pagination-nav__link:hover { border-color: var(--separator); background-color: var(--bg-highlithed); } .pagination-nav__sublabel { color: var(--text-primary); } .alert { background-color: var(--bg-highlithed); border-color: var(--accent); color: var(--text-primary); } .alert a { text-decoration-color: currentColor; } .tabs__item--active { color: var(--text-link); border-color: var(--accent); } .tabs__item { color: var(--text-primary); } .admonition-icon svg { stroke: var(--accent); fill: var(--accent); } hr { border-color: var(--separator); } table th, table td, table thead tr { border-color: var(--separator); } code { background-color: var(--bg-highlithed); border-color: var(--separator); } table tr:nth-child(2n) { background-color: var(--bg_menu); } .navbar__logo { background-color: var(--yellow); padding: 3px; height: calc(2em + 6px); border-radius: 50%; box-sizing: border-box; } .navbar-sidebar__back { background-color: var(--bg-highlithed); color: var(--text-primary); } .navbar-sidebar__brand { background-color: var(--dark-01); } ================================================ FILE: website/src/prism-theme.js ================================================ module.exports = { plain: { color: '#f7f2ea', backgroundColor: '#453D3F' }, styles: [ { types: ['prolog', 'constant', 'builtin'], style: { color: '#F05B4F' } }, { types: ['inserted', 'function'], style: { color: '#F05B4F' } }, { types: ['deleted'], style: { color: 'rgb(255, 85, 85)' } }, { types: ['changed'], style: { color: 'rgb(255, 184, 108)' } }, { types: ['punctuation', 'symbol'], style: { color: '#f7f2ea' } }, { types: ['number'], style: { color: '#F4C63D' } }, { types: ['string', 'char', 'tag', 'selector'], style: { color: '#F4C63D' } }, { types: ['keyword', 'variable'], style: { color: '#F05B4F', fontStyle: 'italic' } }, { types: ['comment'], style: { color: '#7b6d70' } }, { types: ['attr-name'], style: { color: '#F4C63D' } } ] }; ================================================ FILE: website/static/.nojekyll ================================================ ================================================ FILE: website/tsconfig.json ================================================ { // This file is not used in compilation. It is here just for a nice editor experience. "extends": "@tsconfig/docusaurus/tsconfig.json", "compilerOptions": { "baseUrl": "." } }