[
  {
    "path": ".browserslistrc",
    "content": "defaults\nnot ie 11\nnot ie_mob 11\n"
  },
  {
    "path": ".clean-publish",
    "content": "{\n  \"withoutPublish\": true,\n  \"tempDir\": \"package\"\n}\n"
  },
  {
    "path": ".commitlintrc.json",
    "content": "{\n  \"extends\": [\"@commitlint/config-conventional\"],\n  \"rules\": {\n    \"body-max-line-length\": [0]\n  }\n}\n"
  },
  {
    "path": ".czrc",
    "content": "{\n  \"path\": \"@commitlint/cz-commitlint\"\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n\n[*]\n\n# Change these settings to your own preference\nindent_style = space\nindent_size = 2\n\n# We recommend you to keep these unchanged\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": [\"eslint:recommended\", \"plugin:prettier/recommended\"],\n  \"parser\": \"@babel/eslint-parser\",\n  \"parserOptions\": {\n    \"ecmaVersion\": \"latest\",\n    \"requireConfigFile\": false\n  },\n  \"env\": {\n    \"es6\": true,\n    \"browser\": true,\n    \"node\": true\n  },\n  \"rules\": {\n    \"no-console\": 2,\n    \"curly\": 2,\n    \"dot-notation\": 1,\n    \"eqeqeq\": 2,\n    \"no-alert\": 2,\n    \"no-caller\": 2,\n    \"no-eval\": 2,\n    \"no-extra-bind\": 2,\n    \"no-implied-eval\": 2,\n    \"no-multi-spaces\": 2,\n    \"no-with\": 2,\n    \"no-shadow\": 2,\n    \"no-shadow-restricted-names\": 2,\n    \"brace-style\": [\"error\", \"1tbs\"],\n    \"camelcase\": 2,\n    \"comma-style\": [\"error\", \"last\"],\n    \"eol-last\": 2,\n    \"key-spacing\": 2,\n    \"new-cap\": 1,\n    \"no-array-constructor\": 2,\n    \"no-mixed-spaces-and-tabs\": 2,\n    \"no-multiple-empty-lines\": 2,\n    \"semi-spacing\": 2,\n    \"no-spaced-func\": 2,\n    \"no-trailing-spaces\": 2,\n    \"space-before-blocks\": 2,\n    \"spaced-comment\": 1,\n    \"no-var\": 2\n  },\n  \"overrides\": [\n    {\n      \"files\": [\"**/*.ts\"],\n      \"parser\": \"@typescript-eslint/parser\",\n      \"plugins\": [\"@typescript-eslint\"],\n      \"extends\": [\"plugin:@typescript-eslint/recommended\"]\n    },\n    {\n      \"files\": [\"test/**/*.{js,ts}\", \"*.spec.{js,ts}\", \"*.stories.{js,ts}\"],\n      \"plugins\": [\n        \"jest\",\n        \"testing-library\",\n        \"jest-dom\"\n      ],\n      \"extends\": [\"plugin:jest-dom/recommended\"],\n      \"env\": {\n        \"jest/globals\": true\n      },\n      \"rules\": {\n        \"no-console\": 0,\n        \"no-shadow\": 0,\n        \"@typescript-eslint/no-explicit-any\": 0\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": ".gitattributes",
    "content": "* text=auto\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: gionkunz\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug-report.yml",
    "content": "name: \"🐛 Bug Report\"\ndescription: \"If something isn't working as expected.\"\ntitle: \"[Bug]: \"\nlabels: [\"bug\"]\nbody:\n  - type: markdown\n    attributes:\n      value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.\n\n  - type: checkboxes\n    id: input1\n    attributes:\n      label: Would you like to work on a fix?\n      options:\n        - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.\n\n  - type: textarea\n    attributes:\n      label: Current and expected behavior\n      description: A clear and concise description of what the library is doing and what you would expect.\n    validations:\n      required: true\n\n  - type: input\n    attributes:\n      label: Reproduction\n      description: |\n        Please provide issue reproduction.\n        You can give a link to a repository with the reproduction or make a [sandbox](https://codesandbox.io/) and reproduce the issue there.\n    validations:\n      required: true\n\n  - type: input\n    attributes:\n      label: Chartist version\n      description: Which version of Chartist are you using?\n      placeholder: v0.0.0\n    validations:\n      required: true\n\n  - type: textarea\n    attributes:\n      label: Possible solution\n      description: If you have suggestions on a fix for the bug.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: 🤔 Have a Question?\n    url: https://stackoverflow.com/questions/tagged/chartist.js\n    about: Feel free to ask questions on Stack Overflow.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature-request.yml",
    "content": "name: \"🚀 Feature Request\"\ndescription: \"I have a specific suggestion!\"\nlabels: [\"enhancement\"]\nbody:\n  - type: markdown\n    attributes:\n      value: Thanks for taking the time to suggest a new feature! Please fill out this form as completely as possible.\n\n  - type: checkboxes\n    id: input1\n    attributes:\n      label: Would you like to work on this feature?\n      options:\n        - label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.\n\n  - type: textarea\n    attributes:\n      label: What problem are you trying to solve?\n      description: |\n        A concise description of what the problem is.\n      placeholder: |\n        I have an issue when [...]\n    validations:\n      required: true\n\n  - type: textarea\n    attributes:\n      label: Describe the solution you'd like\n    validations:\n      required: true\n\n  - type: textarea\n    attributes:\n      label: Describe alternatives you've considered\n\n  - type: textarea\n    attributes:\n      label: Documentation, Adoption, Migration Strategy\n      description: |\n        If you can, explain how users will be able to use this and how it might be documented. Maybe a mock-up?\n"
  },
  {
    "path": ".github/renovate.json",
    "content": "{\n  \"extends\": [\n    \"config:base\",\n    \":preserveSemverRanges\"\n  ]\n}\n"
  },
  {
    "path": ".github/workflows/checks.yml",
    "content": "name: Checks\non:\n  pull_request:\n    branches:\n      - main\njobs:\n  size:\n    runs-on: ubuntu-latest\n    name: size-limit\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Check size\n        uses: andresz1/size-limit-action@master\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n  storybook:\n    runs-on: ubuntu-latest\n    name: storybook\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Check storybook\n        run: pnpm build:storybook\n  editorconfig:\n    runs-on: ubuntu-latest\n    name: editorconfig\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Check editorconfig\n        uses: editorconfig-checker/action-editorconfig-checker@v1\n  website:\n    runs-on: ubuntu-latest\n    name: website\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Check website\n        run: pnpm build\n        working-directory: ./website\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\non:\n  pull_request:\n  push:\n    branches:\n      - main\njobs:\n  test:\n    runs-on: ubuntu-latest\n    strategy:\n      matrix:\n        stage:\n          - unit\n          - storyshots\n      fail-fast: false\n    name: ${{ matrix.stage }} tests\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Run tests\n        run: pnpm test:${{ matrix.stage }}\n      - name: Collect coverage\n        uses: codecov/codecov-action@v5\n        if: \"success() && matrix.stage == 'unit'\"\n        with:\n          files: ./coverage/lcov.info\n      - name: Collect artifacts\n        uses: actions/upload-artifact@v4\n        if: \"failure() && matrix.stage != 'unit'\"\n        with:\n          name: Image snapshots (${{ matrix.stage }})\n          path: test/__image_snapshots__/\n"
  },
  {
    "path": ".github/workflows/commit.yml",
    "content": "name: Commit\non:\n  push:\njobs:\n  commitlint:\n    runs-on: ubuntu-latest\n    name: commitlint\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n        with:\n          fetch-depth: 0\n      - name: Run commitlint\n        uses: wagoid/commitlint-github-action@v4\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Release\non:\n  issue_comment:\n    types: [created, deleted]\n  push:\n    branches:\n      - main\njobs:\n  check:\n    runs-on: ubuntu-latest\n    name: Context check\n    outputs:\n      continue: ${{ steps.check.outputs.continue }}\n      workflow: ${{ steps.check.outputs.workflow }}\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Context check\n        id: check\n        uses: trigensoftware/simple-release-action@latest\n        with:\n          workflow: check\n          github-token: ${{ secrets.GITHUB_TOKEN }}\n  pull-request:\n    runs-on: ubuntu-latest\n    name: Pull request\n    needs: check\n    if: needs.check.outputs.workflow == 'pull-request'\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Create or update pull request\n        uses: trigensoftware/simple-release-action@latest\n        with:\n          workflow: pull-request\n          github-token: ${{ secrets.GITHUB_TOKEN }}\n  release:\n    runs-on: ubuntu-latest\n    name: Release\n    needs: check\n    if: needs.check.outputs.workflow == 'release'\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n          registry-url: 'https://registry.npmjs.org'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Release\n        uses: trigensoftware/simple-release-action@latest\n        with:\n          workflow: release\n          github-token: ${{ secrets.GITHUB_TOKEN }}\n          npm-token: ${{ secrets.NPM_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/update-storyshots.yml",
    "content": "name: Update storyshots\non: workflow_dispatch\njobs:\n  update-storyshots:\n    runs-on: ubuntu-latest\n    name: storyshots\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Update snapshots\n        run: pnpm test:storyshots -u\n      - name: Collect artifacts\n        uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: Updated storyshots\n          path: test/__image_snapshots__/\n"
  },
  {
    "path": ".github/workflows/website.yml",
    "content": "name: Website\non:\n  push:\n    branches:\n      - main\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n# Allow one concurrent deployment\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: true\njobs:\n  deploy:\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    name: deploy website\n    steps:\n      - name: Checkout the repository\n        uses: actions/checkout@v5\n      - name: Install pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          version: 7\n      - name: Install Node.js\n        uses: actions/setup-node@v5\n        with:\n          node-version: 16\n          cache: 'pnpm'\n      - name: Install dependencies\n        run: pnpm install\n      - name: Build website\n        run: pnpm build\n        working-directory: ./website\n      - name: Setup Pages\n        uses: actions/configure-pages@v5\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n        with:\n          path: './website/build'\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# builds\npackage\ndist\nstorybook-static\n\n# misc\n.DS_Store\n\nnpm-debug.log*\n\n# testing\ncoverage\n"
  },
  {
    "path": ".nano-staged.json",
    "content": "{\n  \"**/*.{js,ts}\": [\"prettier --write\", \"eslint\"]\n}\n"
  },
  {
    "path": ".npmrc",
    "content": "strict-peer-dependencies=false\n"
  },
  {
    "path": ".nvmrc",
    "content": "lts/*\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"singleQuote\": true,\n  \"jsxSingleQuote\": true,\n  \"semi\": true,\n  \"tabWidth\": 2,\n  \"bracketSpacing\": true,\n  \"arrowParens\": \"avoid\",\n  \"trailingComma\": \"none\"\n}\n"
  },
  {
    "path": ".simple-git-hooks.json",
    "content": "{\n  \"commit-msg\": \"pnpm commitlint --edit \\\"$1\\\"\",\n  \"pre-commit\": \"pnpm nano-staged\",\n  \"pre-push\": \"pnpm test\"\n}\n"
  },
  {
    "path": ".simple-release.json",
    "content": "{\n  \"project\": \"@simple-release/pnpm#PnpmProject\"\n}\n"
  },
  {
    "path": ".size-limit.json",
    "content": "[\n  {\n    \"path\": \"dist/index.cjs\",\n    \"limit\": \"36.76 kB\",\n    \"webpack\": false,\n    \"running\": false\n  },\n  {\n    \"path\": \"dist/index.cjs\",\n    \"limit\": \"7.45 kB\",\n    \"import\": \"{ BarChart }\"\n  },\n  {\n    \"path\": \"dist/index.js\",\n    \"limit\": \"36.48 kB\",\n    \"webpack\": false,\n    \"running\": false\n  },\n  {\n    \"path\": \"dist/index.js\",\n    \"limit\": \"7.4 kB\",\n    \"import\": \"{ BarChart }\"\n  },\n  {\n    \"path\": \"dist/index.css\",\n    \"limit\": \"1.3 kB\",\n    \"webpack\": false,\n    \"running\": false\n  }\n]\n"
  },
  {
    "path": ".storybook/main.js",
    "content": "const path = require('path');\n\nmodule.exports = {\n  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],\n  addons: [\n    '@storybook/addon-docs',\n    '@storybook/addon-controls',\n    '@storybook/addon-actions',\n    '@storybook/addon-viewport'\n  ],\n  webpackFinal: async config => {\n    config.module.rules[0].use = [require.resolve('swc-loader')];\n    config.module.rules.push({\n      test: /\\.scss$/,\n      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'].map(\n        require.resolve\n      )\n    });\n\n    config.resolve.alias['chartist-dev/styles$'] = path.resolve(\n      __dirname,\n      '..',\n      'src',\n      'styles',\n      'index.scss'\n    );\n    config.resolve.alias['chartist-dev$'] = path.resolve(\n      __dirname,\n      '..',\n      'src'\n    );\n\n    return config;\n  }\n};\n"
  },
  {
    "path": ".storybook/manager.js",
    "content": "import { addons } from '@storybook/addons';\n\nimport { theme } from './theme';\n\naddons.setConfig({\n  theme,\n  panelPosition: 'right'\n});\n"
  },
  {
    "path": ".storybook/package.json",
    "content": "{\n  \"type\": \"commonjs\"\n}\n"
  },
  {
    "path": ".storybook/preview.js",
    "content": "import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';\nimport { configureActions } from '@storybook/addon-actions';\nimport faker from 'faker';\n\nconst SEED_VALUE = 584;\n\nif (process.env.STORYBOOK_STORYSHOTS) {\n  // Make faker values reproducible.\n  faker.seed(SEED_VALUE);\n}\n\nconfigureActions({\n  depth: 5\n});\n\nexport const parameters = {\n  viewport: {\n    viewports: INITIAL_VIEWPORTS\n  }\n};\n"
  },
  {
    "path": ".storybook/theme.js",
    "content": "import { create } from '@storybook/theming';\n\nexport const theme = create({\n  base: 'light',\n  brandTitle: 'chartist',\n  brandUrl: 'https://github.com/chartist-js/chartist'\n});\n"
  },
  {
    "path": ".tool-versions",
    "content": "pnpm 7.33.7\nnodejs 18.18.0\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n## [1.5.0](https://github.com/chartist-js/chartist/compare/v1.4.0...v1.5.0) (2025-09-30)\n\n### Features\n\n* 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))\n\n## [1.4.0](https://github.com/chartist-js/chartist/compare/v1.3.1...v1.4.0) (2025-06-27)\n\n### Features\n\n* add option to prevent overlapping labels ([#1428](https://github.com/chartist-js/chartist/issues/1428)) ([552bfca](https://github.com/chartist-js/chartist/commit/552bfca452c97a2733bbf813832cefb6dd10fddc))\n\n### [1.3.1](https://github.com/chartist-js/chartist/compare/v1.3.0...v1.3.1) (2025-04-07)\n\n### Bug Fixes\n\n* 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))\n* 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)\n* use clientWidth/clientHeight instead of getBoundingClientRect ([#1395](https://github.com/chartist-js/chartist/issues/1395)) ([1067900](https://github.com/chartist-js/chartist/commit/10679003a8cec24f9c1f559bdd0c241ec02319a4))\n\n## [1.3.0](https://github.com/chartist-js/chartist/compare/v1.2.1...v1.3.0) (2022-11-03)\n\n\n### Features\n\n* 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)\n\n\n### Bug Fixes\n\n* 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)\n* 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))\n\n### [1.2.1](https://github.com/chartist-js/chartist/compare/v1.2.0...v1.2.1) (2022-10-05)\n\n\n### Bug Fixes\n\n* 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)\n* 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))\n\n## [1.2.0](https://github.com/chartist-js/chartist/compare/v1.1.3...v1.2.0) (2022-10-03)\n\n\n### Features\n\n* dist scss styles sources ([#1362](https://github.com/chartist-js/chartist/issues/1362)) ([d0efcb0](https://github.com/chartist-js/chartist/commit/d0efcb00aa45e1d4611a16472da758ead8148f7b))\n* remove legacy styles fallbacks ([#1363](https://github.com/chartist-js/chartist/issues/1363)) ([831673f](https://github.com/chartist-js/chartist/commit/831673f9dff080d1c762db2bc5da397eb0b55ab9))\n\n\n### Bug Fixes\n\n* SvgPath.parse fails on negative values ([#1360](https://github.com/chartist-js/chartist/issues/1360)) ([cf6831d](https://github.com/chartist-js/chartist/commit/cf6831d2f7e08dddb497d6b7ce5354e0976779ab))\n\n### [1.1.3](https://github.com/chartist-js/chartist/compare/v1.1.2...v1.1.3) (2022-09-23)\n\n\n### Bug Fixes\n\n* 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))\n* 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)\n\n### [1.1.2](https://github.com/chartist-js/chartist/compare/v1.1.1...v1.1.2) (2022-08-14)\n\n\n### Bug Fixes\n\n* add id field to AnimationDefinition interface ([#1351](https://github.com/chartist-js/chartist/issues/1351)) ([4012c43](https://github.com/chartist-js/chartist/commit/4012c43942e2dd243a4e5983f25bf4c22ea42d91))\n\n### [1.1.1](https://github.com/chartist-js/chartist/compare/v1.1.0...v1.1.1) (2022-08-13)\n\n\n### Bug Fixes\n\n* add styles to side effects ([#1350](https://github.com/chartist-js/chartist/issues/1350)) ([053bf97](https://github.com/chartist-js/chartist/commit/053bf978d825c6285da93af3558b8c0667676212))\n\n## [1.1.0](https://github.com/chartist-js/chartist/compare/v1.0.0...v1.1.0) (2022-08-13)\n\n\n### Features\n\n* 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))\n\n\n### Bug Fixes\n\n* 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))\n\n## [1.0.0](https://github.com/chartist-js/chartist/compare/v0.11.4...v1.0.0) (2022-08-08)\n\n\n### ⚠ BREAKING CHANGES\n\n* [new exports names](https://github.com/chartist-js/chartist#esm)\n* methods in EventEmitter were renamed: `addEventHandler` -> `on`, `removeEventHandler` -> `off` ([73e1c44](https://github.com/chartist-js/chartist/commit/73e1c44dc1abab4938dc623a3dc22caad92af6a8))\n\n### Features\n\n* [TypeScript support](https://github.com/chartist-js/chartist#typescript) ([ee4106e](https://github.com/chartist-js/chartist/commit/ee4106e04f3c081805dd79675340378f895c8290))\n* [ESM support](https://github.com/chartist-js/chartist#esm)\n\n\nv0.11.0 - 11 Apr 2017\n- Added CSP compatibility by using CSSOM instead of style attributes (Francisco Silva)\n- Added feature to render pie / donut chart as solid shape, allowing outlines (Sergey Kovalyov, Chris Carson)\n- Fixed XMLNS for foreignObjet content (Alfredo Matos)\n\nv0.10.0 - 23 Oct 2016\n---------------------\n\n- Added dominant-baseline styles for pie and donut charts (Gion Kunz)\n- Added public getNode on SVG api (Gion Kunz)\n- Added support for bar charts to have auto narrowing on AutoScaleAxis by overriding referenceValue (Jonathan Dumaine)\n- Added amdModuleId for better integration into webpack (Chris)\n- Added grid background to line and bar chart (hansmaad)\n- Added new LTS node version and included NPM run scripts (Gion Kunz)\n- Added correct meta data emission in events (Gion Kunz)\n- Fixed rounding issues where raw value was added instead of rounded (Gion Kunz)\n- Fixed step axis issue with axis stretch and series count 0 (Gion Kunz)\n- Fixed label position of single series pie / donut charts to be centered (Gion Kunz)\n- Fixed order or drawing pie and donut slices (Gion Kunz)\n- Fixed calculations of stepLength to only stretch ticksLength if > 1 (Alexander van Eck)\n- Fixed better handling of axisOptions.position and fallback to 'end' position (Alexander van Eck)\n- Fixed handling of holes in interpolation for multi-value series (James Watmuff)\n- Fixed function StepAxis() returning NaN (Joao Milton)\n- Fixed NaN issues in SVG when rendering Pie chart with only 0s (Alexander van Eck)\n- Fixed infinite loop in getBounds with a more robust increment (hansmaad)\n- Fixed performance of Chartist.extend (cheese83)\n- Fixed license reference issues in package.json (Jacob Quant)\n- Cleanup of data normalization changes and allows Date objects and booleans as values (Gion Kunz)\n- Cleanup refactoring for data management and normalization (Gion Kunz)\n\nv0.9.8 - 22 Jun 2016\n--------------------\n- Added monotone cubic interpolation which is now the default interpolation for line charts (James Watmuff)\n- Update zoom plugin to 0.2.1 (hansmaad)\n- Bugfix: Prevent infinite loop in getBounds if bounds.valueRange is very small, fixes #643 (hansmaad)\n- Bugfix: Correct update events during media changes (Rory Hunter)\n- Bugfix: prevent negative value for foreignObject width attribute (Jose Ignacio)\n- Fixed example line chart in getting started documentation (Robin Edbom)\n- Updated development pipeline dependencies (Gion Kunz)\n- Updated chartist tooltip plugin and example styles (Gion Kunz)\n- Fixed WTFPL License issue (Gion Kunz)\n\nv0.9.7 - 23 Feb 2016\n--------------------\n- Fixed bug with label and grid rendering on axis, fixes #621\n\nv0.9.6 - 22 Feb 2016\n--------------------\n- Added dual licensing WTFPL and MIT, built new version (Gion Kunz)\n- Adding unminified CSS to dist output, fixes #506 (Gion Kunz)\n- Refactored namespaced attribute handling, fixes #584 (Gion Kunz)\n- Allow charts to be created without data and labels, fixes #598, fixes #588, fixes #537, fixes #425 (Gion Kunz> <Carlos Morales)\n- Removed onlyInteger setting from default bar chart settings, fixes #423 (Gion Kunz)\n- Removed serialization of values on line chart areas, fixes #424 (Gion Kunz)\n- Removed workaround and fallback for SVG element width and height calculations, fixes #592 (Gion Kunz)\n- Render 0 in ct:value attribute for line graphs (Paul Salaets)\n- Allow empty pie chart values to be ignored (Stephen)\n- Fix #527 Pie render issue with small angles. (hansmaad)\n- Small fix for stacked bars with 'holes' in the data (medzes)\n\nv0.9.5 - 14 Nov 2015\n--------------------\n- Added 'fillHoles' option for line graphs, which continues the line smoothly through data holes (Thanks to Joshua Warner !)\n- Added option to use relative donut width values (Thanks to hansmaad !)\n- Added stackMode for bar charts to create overlapping charts or bipolar stacked charts (Thanks to Douglas Mak !)\n- Fixed issue with unordered ticks in fixed scale axis, fixes #411 (Thanks Carlos !)\n- Fixed left navigation in examples was not using valid anchors, fixes #514 (Thanks Carlos !)\n- Internal refactoring and cleanup (Thanks to hansmaad !)\n\nv0.9.4 - 06 Aug 2015\n--------------------\n- Added axes to all events where they are available in context to provide better API convenience when developing plugins\n- Consider additional parameters of SVG elem when called with DOM node\n\nv0.9.3 - 05 Aug 2015\n--------------------\n- Added better check for undefined values in bar chart, fixes #400\n- Fixed issue with SVG feature check within Svg module (Thanks to Markus Gruber !)\n\nv0.9.2 - 02 Aug 2015\n--------------------\n- Enabled bar charts to use dynamic axes fixes #363, fixes #355\n- Added axis title plugin to plugins page (Thanks to @alexstanbury !)\n- Added a label group for Pie charts to prevent occlusion by slices (Thanks to Anthony Jimenez!)\n- Added better handling for multi values when writing custom attributes, fixes #379\n\nv0.9.1 - 24 Jun 2015\n--------------------\n- Fixed bug with areaBase narrowing process in area charts, fixes #364\n- Fixed bug on bar chart where wrong offset was used (axis offset), fixes #347 (Thanks to @amsardesai !)\n- Fixed bug with namespace attributes that caused duplication of SVG element on updates in old browsers (Thanks to @radist2s !)\n\nv0.9.0 - 10 Jun 2015\n--------------------\n- Major refactoring of axis and projection code, added possibility to configure axes when creating a chart\n- Added areaBase to series options override in line chart, fixes #342\n- Throwing up in infinite loop for edge cases and during development\n- Documentation: Added documentation for axis configuration and getting started guide for custom axes\n\nv0.8.3 - 07 Jun 2015\n--------------------\n- Greatly reduced CSS selector complexity and split slice into slice-pie and slice-donut\n- Added more robust detach mechanism that takes async initialization into account\n- Added better handling for area drawing with segmented paths, fixes #340\n- Documentation: Added getting started guide for styling charts\n\nv0.8.2 - 02 Jun 2015\n--------------------\n- Fixed broken release 0.8.1\n\nv0.8.1 - 02 Jun 2015 (BROKEN!)\n------------------------------\n- Added new option labelPosition for Pie charts to have better control over label placement, fixes #315\n- Added default styles for alignment-baseline\n- Added better support for undefined values in bar charts\n- Refactored getHighLow to use recursion in order to enable more dynamic array structures and better edge case management\n- Fixed issue with Chartist.rho that caused endless loop when called with 1, fixes #318\n\nv0.8.0 - 10 May 2015\n--------------------\n- Added new option to bar charts to allow a series distribution and use a simple one dimensional array for data (#209)\n- Added option for label placement and refactored label positioning code (#302)\n- Added option to only use integer numbers in linear scale axis (#77)\n- Added possibility to add series configuration on line chart to override specific options on series level (#289, #168)\n- Added functionality to handle holes in line charts (#294)\n- Added step interpolation for line charts\n- Added default styles for bar and horizontal bar labels that make more sense (#303)\n- Added series data and meta information to events (#293)\n- Changed line chart behavior to draw points from interpolated values (#295)\n- Removed restriction to SVGElements so Chartist.Svg can be used for HTML DOM elements (#261)\n- Refactored and simplified axis creation, also includes updated CSS label handling\n- Refactored getDataArray for simplification and fixed type conversion issue with data arrays for pie charts\n- Centralized high/low calculations in getHighLow() method and added support for empty charts. Thanks @scthi !\n- Fixed bug in pie chart where meta was only added when series name was specified\n- Fixed bug where special condition to check single value should also include object value notation (#265)\n- Fixed bug with Chartist.extend when null property is extended\n- Fixed bug with Firefox dying with a DOM exception when calling getBBox() on an invisible node. Thanks @scthi !\n- Switched from object literal accessor definition to regular function (#278)\n\nv0.7.4 - 19 Apr 2015\n--------------------\n- Enhanced documentation site (Accessibility plugin, live example eval, fixed path to Sass settings, better HTML example of how to include Chartist, example how to include multiple charts on one page)\n- Added Arc to Chartist.Svg.Path\n- Refactored Chartist.Pie to make use of Svg.Path and expose path in events\n- Closing path of Pie if not a donut for correct strokes\n- Exposing axis objects in created event\n- Changed grid event to use axis object instead of string\n\nv0.7.3 - 27 Feb 2015\n--------------------\n- Fixed bugs in the chart.update method \n- Fixed rounding precision issues in order of magnitude calculation\n- Fixed bug in Chartist.extend which caused merge problems from object properties into non-objects\n- Added possibility to use chartPadding with a padding object that contains top, right, bottom and left properties\n\nv0.7.2 - 12 Feb 2015\n--------------------\n- Added new line smoothing / interpolation module for configurable line smoothing\n- Added simple line smoothing. Thanks @danieldiekmeier !\n- Removed some unused internal code\n\nv0.7.1 - 02 Feb 2015\n--------------------\n- Bug fix where some files where not included in dist version of Chartist which made v0.7.0 unusable.\n\nv0.7.0 - 01 Feb 2015\n--------------------\n- This version introduces a new option in the bar charts to draw them horizontally\n- Underlying changes for axis model that allows flexible value projection and removes code duplication\n- Added SVG Path API for manipulating SVG paths. This can be used in animations or to transform the output by Chartist further.\n- The fullWidth and centerBars options were removed from the bar chart\n- Updating chart after options update enables the use of 'print' media query in responsive options to have a quick redraw before printing. This only works in Chrome 40 so far\n- Fixed issues with 0 values in series object data notation\n\nv0.6.1 - 23 Jan 2015\n--------------------\n- Fixed bug that prevented data events to be captured\n- Fixed bug with update function called in the same call stack as chart constructor\n\nv0.6.0 - 17 Jan 2015\n--------------------\n- Added 14 default colors for colored series\n- Added data event that allows you to transform the data before it gets rendered in Chartist. This is also useful for plugin authors that would like to create plugins which modify data.\n- Possibility to specify meta data in the data object passed to Chartist that will be written to custom attributes into the DOM.\n- Possibility to specify options when calling chart.update in order to override the current options with new ones\n- Fixed some missing entries in the bower ignore section to exclude the documentation site as well as the grunt tasks\n- Fixed issue when Chartist is initialized in a container that already contains SVG\n\nv0.5.0 - 14 Dec 2014\n--------------------\n- Added new option for line and bar chart to use full width of the chart area by skipping the last grid line\n- Added new option for bar chart to create stacked bar charts\n- All chart update functions now accepts an optional data parameter that allows to update an existing chart with new data\n- Fix for an error when charts get re-constructed on the same element and in the same call stack\n\nv0.4.4 - 11 Dec 2014\n--------------------\n- Fixed NS_ERROR_FAILURE error in Firefox and added graceful handling of unsupported SMIL animations (i.e. in foreignObjects)\n\nv0.4.3 - 27 Nov 2014\n--------------------\n- Updated plugin architecture for convenience reasons and better support for modularization\n\nv0.4.2 - 27 Nov 2014\n--------------------\n\n- Included first version of Chartist.js Plugin mechanism\n- Major refactoring of development stack (thanks @Autarc !)\n- Removed unused functions in Chartist.Core\n\nv0.4.1 - 21 Nov 2014\n--------------------\n\n- Added more functionality to Chartist.Svg: select child elements, parent, root as well as a Svg list wrapper with delegation functions\n- Fixed bug in strip unit\n- Added classes to the label and grid gorups\n- Added this as return value so calls to chart can be chained up easily\n\n\nv0.4.0 - 17 Nov 2014\n--------------------\n\n- Added new animation API for SMIL animations\n- Added possibility to add event handlers with asterisk that will be triggerd on all events including the event name in the cb function\n- Added possibility to pass DOM node to SVG constructor so you can wrap existing SVG nodes into a Chartist.Svg element\n- Fixed svg recycling on re-creation\n- Fixed resize listener detach that wasn't working properly\n- Refactored Chartist.Svg to use Chartist.Class\n- Including event when line and area is drawn\n- Changed default scaleMinSpace to 20 to be more mobile friendly\n- Fixed bug with line area base\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to Chartist\n\n- [Issues and Bugs](#issue)\n- [Submission Guidelines](#submit)\n\n## <a name=\"issue\"></a> Found an Issue?\n\nIf you find a bug in the source code or a mistake in the documentation, you can help us by\nsubmitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request\nwith a fix.\n\n## Pre-requisites\n\nYou will need the following to run a local development enviroment.\n\n- Node.js & npm\n- pnpm (`npm install -g pnpm`)\n- Text editor of your choice\n\n## How to Run a Local Distribution\n\n1. `cd` into your local copy of the repository.\n2. Run `pnpm i` to install dependencies located in `package.json`.\n5. 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.\n\n## <a name=\"submit\"></a> Submission Guidelines\n\nIf you are creating a Pull Request, fork the repository and make any changes on the `develop` branch.\n"
  },
  {
    "path": "LICENSE-MIT",
    "content": "Copyright (c) 2013 Gion Kunz <gion.kunz@gmail.com>\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
  },
  {
    "path": "LICENSE-WTFPL",
    "content": "            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n                    Version 2, December 2004\n\nCopyright (C) 2004 Sam Hocevar <sam@hocevar.net>\n\nEveryone is permitted to copy and distribute verbatim or modified\ncopies of this license document, and changing it is allowed as long\nas the name is changed.\n\n            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n\n  0. You just DO WHAT THE FUCK YOU WANT TO.\n"
  },
  {
    "path": "README.md",
    "content": "# Big welcome by the Chartist Guy\n\n[![NPM version][npm]][npm-url]\n[![Downloads][downloads]][downloads-url]\n[![Build status][build]][build-url]\n[![Coverage status][coverage]][coverage-url]\n[![Bundle size][size]][size-url]\n[![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url]\n\n[npm]: https://img.shields.io/npm/v/chartist.svg\n[npm-url]: https://www.npmjs.com/package/chartist\n\n[downloads]: https://img.shields.io/npm/dm/chartist.svg\n[downloads-url]: https://www.npmjs.com/package/chartist\n\n[build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml\n[build-url]: https://github.com/chartist-js/chartist/actions\n\n[coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg\n[coverage-url]: https://app.codecov.io/gh/chartist-js/chartist\n\n[size]: https://img.shields.io/bundlephobia/minzip/chartist\n[size-url]: https://bundlephobia.com/package/chartist\n\n[chat]: https://badges.gitter.im/gionkunz/chartist-js.svg\n[chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge\n\n<p align=\"center\">\n  <img width=\"400\" alt=\"The Chartist Guy\" src=\"https://raw.github.com/chartist-js/chartist/main/website/static/img/chartist-guy.gif\">\n</p>\n\nChartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already\nout there, but they are either:\n\n- use the wrong technologies for illustration (canvas) \n- weighs hundreds of kilobytes\n- are not flexible enough while keeping the configuration simple\n- are not friendly to designers\n- more annoying things\n\nThat's why we started Chartist and our goal is to solve all of the above issues.\n\n<hr />\n<a href=\"#quickstart\">Quickstart</a>\n<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>\n<a href=\"#what-is-it-made-for\">What is it made for?</a>\n<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>\n<a href=\"https://chartist.dev/docs/whats-new-in-v1\">What's new in v1?</a>\n<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>\n<a href=\"https://chartist.dev/\">Docs</a>\n<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>\n<a href=\"https://chartist.dev/examples\">Examples</a>\n<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>\n<a href=\"#contribution\">Contribution</a>\n<hr />\n\n## Quickstart\n\nInstall this library using your favorite package manager:\n\n```sh\npnpm add chartist\n# or\nyarn add chartist\n# or\nnpm i chartist\n```\n\nThen, just import chart you want and use it:\n\n```js\nimport { BarChart } from 'chartist';\n\nnew BarChart('#chart', {\n  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n  series: [\n    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]\n  ]\n}, {\n  high: 10,\n  low: -10,\n  axisX: {\n    labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)\n  }\n});\n```\n\n<br />\n\nNeed an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-chartist), an open-source API for data apps.\n\n<br />\n\n[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-chartist)\n\n## What is it made for?\n\nChartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. \nIt's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing \nit's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers \ntoday and say good bye to the idea of solving all problems ourselves.\n\nChartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This \nalso means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be \ndone with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing \"Simple \nresponsive Charts\" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.\n\n## Plugins\n\nComing soon.\n\n<details>\n  <summary>For v0.11</summary>\n\nSome features aren't right for the core product\nbut there is a great set of plugins available\nwhich add features like:\n\n* [Axis labels](http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin)\n* [Tooltips at data points](https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin)\n* [Coloring above/below a threshold](https://gionkunz.github.io/chartist-js/plugins.html#threshold-plugin)\n\nand more.\n\nSee all the plugins [here](https://gionkunz.github.io/chartist-js/plugins.html).\n\n</details>\n\n## Contribution\n\nWe are looking for people who share the idea of having a simple, flexible charting library that is responsive and uses\nmodern and future-proof technologies. The goal of this project is to create a responsive charting library where developers\nhave their joy in using it and designers love it because of the designing flexibility they have. Please contribute\nto the project if you like the idea and the concept and help us to bring nice looking responsive open-source charts\nto the masses.\n\nContribute if you like the Chartist Guy!\n"
  },
  {
    "path": "jest.config.json",
    "content": "{\n  \"testEnvironment\": \"jsdom\",\n  \"testRegex\": \"(test|src)/.*\\\\.spec\\\\.(jsx?|tsx?)$\",\n  \"setupFilesAfterEnv\": [\"<rootDir>/test/setup.js\"],\n  \"transform\": {\n    \"^.+\\\\.(t|j)sx?$\": [\"@swc/jest\", {\n      \"env\": {\n        \"targets\": {\n          \"node\": 14\n        }\n      }\n    }]\n  },\n  \"moduleNameMapper\": {\n    \"^chartist-dev$\": \"<rootDir>/src\",\n    \"^chartist-dev/styles$\": \"<rootDir>/test/mock/cssModule.js\"\n  },\n  \"collectCoverage\": true,\n  \"collectCoverageFrom\": [\n    \"src/**/*.{js,jsx,ts,tsx}\",\n    \"!**/node_modules/**\",\n    \"!**/*.stories.*\"\n  ],\n  \"coverageReporters\": [\n    \"lcovonly\",\n    \"text\"\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"chartist\",\n  \"type\": \"module\",\n  \"version\": \"1.5.0\",\n  \"description\": \"Simple, responsive charts\",\n  \"author\": \"Gion Kunz\",\n  \"homepage\": \"https://chartist.dev\",\n  \"license\": \"MIT OR WTFPL\",\n  \"licenses\": [\n    {\n      \"type\": \"WTFPL\",\n      \"url\": \"https://github.com/chartist-js/chartist/blob/main/LICENSE-WTFPL\"\n    },\n    {\n      \"type\": \"MIT\",\n      \"url\": \"https://github.com/chartist-js/chartist/blob/main/LICENSE-MIT\"\n    }\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/chartist-js/chartist.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/chartist-js/chartist/issues\"\n  },\n  \"keywords\": [\n    \"chartist\",\n    \"responsive charts\",\n    \"charts\",\n    \"charting\"\n  ],\n  \"engines\": {\n    \"node\": \">=14\"\n  },\n  \"sideEffects\": [\n    \"*.css\",\n    \"*.scss\"\n  ],\n  \"types\": \"./dist/index.d.ts\",\n  \"style\": \"./dist/index.css\",\n  \"unpkg\": \"./dist/index.umd.js\",\n  \"jsdelivr\": \"./dist/index.umd.js\",\n  \"main\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"exports\": {\n      \".\": {\n        \"require\": \"./dist/index.cjs\",\n        \"import\": \"./dist/index.js\"\n      },\n      \"./dist/*\": \"./dist/*\"\n    },\n    \"directory\": \"package\"\n  },\n  \"files\": [\n    \"dist\",\n    \"LICENSE-WTFPL\",\n    \"LICENSE-MIT\"\n  ],\n  \"scripts\": {\n    \"clear:package\": \"del ./package\",\n    \"clear\": \"del ./package ./dist ./coverage\",\n    \"prepublishOnly\": \"pnpm test && pnpm build && pnpm clear:package && clean-publish\",\n    \"postpublish\": \"pnpm clear:package\",\n    \"emitDeclarations\": \"tsc --project ./tsconfig.build.json --emitDeclarationOnly\",\n    \"build:styles\": \"./scripts/styles.cjs ./src/styles/index.scss\",\n    \"build\": \"rollup -c & pnpm build:styles & pnpm emitDeclarations\",\n    \"start:storybook\": \"start-storybook -p 6006 --ci\",\n    \"build:storybook\": \"del ./storybook-static; NODE_ENV=production build-storybook\",\n    \"jest\": \"jest -c jest.config.json\",\n    \"test:size\": \"size-limit\",\n    \"test:unit\": \"jest -c jest.config.json ./src\",\n    \"test:storyshots\": \"jest -c jest.config.json ./test/storyshots.spec.js\",\n    \"test\": \"pnpm lint && pnpm test:unit\",\n    \"lint\": \"eslint './*.{js,ts,cjs}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts,cjs}' 'sandboxes/**/*.{js,ts}'\",\n    \"format\": \"prettier --write './*.{js,ts}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{cjs,js,ts}' 'sandboxes/**/*.{js,ts}'\",\n    \"commit\": \"cz\",\n    \"updateGitHooks\": \"simple-git-hooks\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.17.9\",\n    \"@babel/eslint-parser\": \"^7.17.0\",\n    \"@commitlint/cli\": \"^17.0.0\",\n    \"@commitlint/config-conventional\": \"^17.0.0\",\n    \"@commitlint/cz-commitlint\": \"^17.0.0\",\n    \"@rollup/plugin-node-resolve\": \"^13.2.0\",\n    \"@size-limit/preset-big-lib\": \"^7.0.8\",\n    \"@storybook/addon-actions\": \"^6.4.22\",\n    \"@storybook/addon-controls\": \"^6.4.22\",\n    \"@storybook/addon-docs\": \"^6.4.22\",\n    \"@storybook/addon-storyshots\": \"^6.4.22\",\n    \"@storybook/addon-storyshots-puppeteer\": \"^6.4.22\",\n    \"@storybook/addon-viewport\": \"^6.4.22\",\n    \"@storybook/html\": \"^6.4.22\",\n    \"@swc/core\": \"^1.2.165\",\n    \"@swc/helpers\": \"^0.5.0\",\n    \"@swc/jest\": \"^0.2.20\",\n    \"@testing-library/jest-dom\": \"^5.16.4\",\n    \"@types/faker\": \"^5.5.8\",\n    \"@types/jest\": \"^27.5.1\",\n    \"@types/node\": \"^18.0.0\",\n    \"@types/testing-library__jest-dom\": \"^5.14.5\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.25.0\",\n    \"@typescript-eslint/parser\": \"^5.25.0\",\n    \"browserslist\": \"^4.20.2\",\n    \"clean-publish\": \"^4.0.1\",\n    \"commitizen\": \"^4.2.4\",\n    \"cssnano\": \"^4.1.11\",\n    \"del\": \"^6.0.0\",\n    \"del-cli\": \"^5.0.0\",\n    \"eslint\": \"^8.15.0\",\n    \"eslint-config-prettier\": \"^8.5.0\",\n    \"eslint-plugin-jest\": \"^27.0.0\",\n    \"eslint-plugin-jest-dom\": \"^4.0.1\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-testing-library\": \"^5.5.0\",\n    \"faker\": \"^5.5.3\",\n    \"http-server\": \"^14.1.0\",\n    \"jest\": \"^27.5.1\",\n    \"jest-image-snapshot\": \"^4.5.1\",\n    \"nano-staged\": \"^0.8.0\",\n    \"postcss\": \"^8.0.0\",\n    \"postcss-loader\": \"^4.3.0\",\n    \"postcss-preset-env\": \"^6.7.1\",\n    \"prettier\": \"^2.6.2\",\n    \"puppeteer\": \"^14.0.0\",\n    \"rollup\": \"^2.70.1\",\n    \"rollup-plugin-swc\": \"^0.2.1\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"sass\": \"^1.50.1\",\n    \"sass-loader\": \"^10.0.0\",\n    \"simple-git-hooks\": \"^2.7.0\",\n    \"size-limit\": \"^7.0.8\",\n    \"swc-loader\": \"^0.2.3\",\n    \"typescript\": \"^4.6.4\"\n  }\n}\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "packages:\n  - 'website'\n"
  },
  {
    "path": "postcss.config.cjs",
    "content": "const isProd = process.env.NODE_ENV !== 'development';\n\nmodule.exports = {\n  plugins: [\n    require('postcss-preset-env'),\n    isProd &&\n      require('cssnano')({\n        preset: 'default'\n      })\n  ].filter(Boolean)\n};\n"
  },
  {
    "path": "rollup.config.js",
    "content": "import swc from 'rollup-plugin-swc';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport { terser } from 'rollup-plugin-terser';\nimport pkg from './package.json';\n\nconst extensions = ['.js', '.ts', '.tsx'];\nconst external = _ => /node_modules/.test(_) && !/@swc\\/helpers/.test(_);\nconst plugins = (targets, minify) =>\n  [\n    nodeResolve({\n      extensions\n    }),\n    swc({\n      jsc: {\n        parser: {\n          syntax: 'typescript'\n        },\n        externalHelpers: true\n      },\n      env: {\n        targets\n      },\n      module: {\n        type: 'es6'\n      },\n      sourceMaps: true\n    }),\n    minify && terser()\n  ].filter(Boolean);\n\nexport default [\n  {\n    input: pkg.main,\n    plugins: plugins('defaults, not ie 11, not ie_mob 11'),\n    external,\n    output: {\n      file: pkg.publishConfig.main,\n      format: 'cjs',\n      exports: 'named',\n      sourcemap: true\n    }\n  },\n  {\n    input: pkg.main,\n    plugins: plugins('defaults, not ie 11, not ie_mob 11', true),\n    external: () => false,\n    output: {\n      file: pkg.unpkg,\n      format: 'umd',\n      name: 'Chartist',\n      exports: 'named',\n      sourcemap: true\n    }\n  },\n  {\n    input: pkg.main,\n    plugins: plugins('defaults and supports es6-module'),\n    external,\n    output: {\n      file: pkg.publishConfig.module,\n      format: 'es',\n      sourcemap: true\n    }\n  }\n];\n"
  },
  {
    "path": "sandboxes/bar/bi-polar-interpolated/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/bi-polar-interpolated/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart, BarChartOptions } from 'chartist';\n\nconst data = {\n  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n  series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]\n};\n\nconst options: BarChartOptions = {\n  high: 10,\n  low: -10,\n  axisX: {\n    labelInterpolationFnc(value, index) {\n      return index % 2 === 0 ? value : null;\n    }\n  }\n};\n\nnew BarChart('#chart', data, options);\n"
  },
  {
    "path": "sandboxes/bar/bi-polar-interpolated/package.json",
    "content": "{\n  \"name\": \"bar-bi-polar-interpolated\",\n  \"description\": \"Bi-polar bar chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/bi-polar-interpolated/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/distributed-series/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/distributed-series/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],\n    series: [20, 60, 120, 200, 180, 20, 10]\n  },\n  {\n    distributeSeries: true\n  }\n);\n"
  },
  {
    "path": "sandboxes/bar/distributed-series/package.json",
    "content": "{\n  \"name\": \"bar-distributed-series\",\n  \"description\": \"Distributed series\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/distributed-series/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/extreme-responsive/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/extreme-responsive/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart, noop } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],\n    series: [\n      [5, 4, 3, 7],\n      [3, 2, 9, 5],\n      [1, 5, 8, 4],\n      [2, 3, 4, 6],\n      [4, 1, 2, 1]\n    ]\n  },\n  {\n    // Default mobile configuration\n    stackBars: true,\n    axisX: {\n      labelInterpolationFnc: value =>\n        String(value)\n          .split(/\\s+/)\n          .map(word => word[0])\n          .join('')\n    },\n    axisY: {\n      offset: 20\n    }\n  },\n  [\n    // Options override for media > 400px\n    [\n      'screen and (min-width: 400px)',\n      {\n        reverseData: true,\n        horizontalBars: true,\n        axisX: {\n          labelInterpolationFnc: noop\n        },\n        axisY: {\n          offset: 60\n        }\n      }\n    ],\n    // Options override for media > 800px\n    [\n      'screen and (min-width: 800px)',\n      {\n        stackBars: false,\n        seriesBarDistance: 10\n      }\n    ],\n    // Options override for media > 1000px\n    [\n      'screen and (min-width: 1000px)',\n      {\n        reverseData: false,\n        horizontalBars: false,\n        seriesBarDistance: 15\n      }\n    ]\n  ]\n);\n"
  },
  {
    "path": "sandboxes/bar/extreme-responsive/package.json",
    "content": "{\n  \"name\": \"bar-extreme-responsive\",\n  \"description\": \"Extreme responsive configuration\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/extreme-responsive/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/horizontal/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/horizontal/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: [\n      'Monday',\n      'Tuesday',\n      'Wednesday',\n      'Thursday',\n      'Friday',\n      'Saturday',\n      'Sunday'\n    ],\n    series: [\n      [5, 4, 3, 7, 5, 10, 3],\n      [3, 2, 9, 5, 4, 6, 4]\n    ]\n  },\n  {\n    seriesBarDistance: 10,\n    reverseData: true,\n    horizontalBars: true,\n    axisY: {\n      offset: 70\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/bar/horizontal/package.json",
    "content": "{\n  \"name\": \"bar-horizontal\",\n  \"description\": \"Horizontal bar chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/horizontal/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/label-position/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/label-position/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n    series: [\n      [5, 4, 3, 7, 5, 10, 3],\n      [3, 2, 9, 5, 4, 6, 4]\n    ]\n  },\n  {\n    axisX: {\n      // On the x-axis start means top and end means bottom\n      position: 'start'\n    },\n    axisY: {\n      // On the y-axis start means left and end means right\n      position: 'end'\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/bar/label-position/package.json",
    "content": "{\n  \"name\": \"bar-label-position\",\n  \"description\": \"Label placement\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/label-position/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/multiline/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/multiline/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: [\n      'First quarter of the year',\n      'Second quarter of the year',\n      'Third quarter of the year',\n      'Fourth quarter of the year'\n    ],\n    series: [\n      [60000, 40000, 80000, 70000],\n      [40000, 30000, 70000, 65000],\n      [8000, 3000, 10000, 6000]\n    ]\n  },\n  {\n    seriesBarDistance: 10,\n    axisX: {\n      offset: 60\n    },\n    axisY: {\n      offset: 80,\n      labelInterpolationFnc: value => value + ' CHF',\n      scaleMinSpace: 15\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/bar/multiline/package.json",
    "content": "{\n  \"name\": \"bar-multiline\",\n  \"description\": \"Multi-line labels\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/multiline/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/overlapping-bars/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/overlapping-bars/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart, BarChartOptions, ResponsiveOptions } from 'chartist';\n\nconst data = {\n  labels: [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'Mai',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec'\n  ],\n  series: [\n    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],\n    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]\n  ]\n};\n\nconst options = {\n  seriesBarDistance: 15\n};\n\nconst responsiveOptions: ResponsiveOptions<BarChartOptions> = [\n  [\n    'screen and (min-width: 641px) and (max-width: 1024px)',\n    {\n      seriesBarDistance: 10,\n      axisX: {\n        labelInterpolationFnc: value => value\n      }\n    }\n  ],\n  [\n    'screen and (max-width: 640px)',\n    {\n      seriesBarDistance: 5,\n      axisX: {\n        labelInterpolationFnc: value => String(value)[0]\n      }\n    }\n  ]\n];\n\nnew BarChart('#chart', data, options, responsiveOptions);\n"
  },
  {
    "path": "sandboxes/bar/overlapping-bars/package.json",
    "content": "{\n  \"name\": \"bar-overlapping-bars\",\n  \"description\": \"Overlapping bars on mobile\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/overlapping-bars/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/stacked/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/stacked/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n    series: [\n      [800000, 1200000, 1400000, 1300000],\n      [200000, 400000, 500000, 300000],\n      [100000, 200000, 400000, 600000]\n    ]\n  },\n  {\n    stackBars: true,\n    axisY: {\n      labelInterpolationFnc: value => +value / 1000 + 'k'\n    }\n  }\n).on('draw', data => {\n  if (data.type === 'bar') {\n    data.element.attr({\n      style: 'stroke-width: 30px'\n    });\n  }\n});\n"
  },
  {
    "path": "sandboxes/bar/stacked/package.json",
    "content": "{\n  \"name\": \"bar-stacked\",\n  \"description\": \"Stacked bar chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/stacked/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/stacked-accumulate-relative/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/stacked-accumulate-relative/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n  '#chart',\n  {\n    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],\n    series: [\n      [5, 4, -3, -5],\n      [5, -4, 3, -5]\n    ]\n  },\n  {\n    stackBars: true,\n    stackMode: 'accumulate-relative'\n  }\n);\n"
  },
  {
    "path": "sandboxes/bar/stacked-accumulate-relative/package.json",
    "content": "{\n  \"name\": \"bar-stacked\",\n  \"description\": \"Stacked bar chart with accumulate-relative stack mode\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/stacked-accumulate-relative/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/bar/with-circle-modify-drawing/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/bar/with-circle-modify-drawing/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { BarChart, Svg, getMultiValue } from 'chartist';\n\n// Create a simple bi-polar bar chart\nconst chart = new BarChart(\n  '#chart',\n  {\n    labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n    series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]\n  },\n  {\n    high: 10,\n    low: -10,\n    axisX: {\n      labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)\n    }\n  }\n);\n\n// Listen for draw events on the bar chart\nchart.on('draw', data => {\n  // If this draw event is of type bar we can use the data to create additional content\n  if (data.type === 'bar') {\n    // 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\n    data.group.append(\n      new Svg(\n        'circle',\n        {\n          cx: data.x2,\n          cy: data.y2,\n          r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5\n        },\n        'ct-slice-pie'\n      )\n    );\n  }\n});\n"
  },
  {
    "path": "sandboxes/bar/with-circle-modify-drawing/package.json",
    "content": "{\n  \"name\": \"bar-with-circle-modify-drawing\",\n  \"description\": \"Add peak circles using the draw events\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/bar/with-circle-modify-drawing/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/area/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/area/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5, 6, 7, 8],\n    series: [[5, 9, 7, 8, 5, 3, 5, 4]]\n  },\n  {\n    low: 0,\n    showArea: true\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/area/package.json",
    "content": "{\n  \"name\": \"line-area\",\n  \"description\": \"Line chart with area\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/area/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/axis-auto/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/axis-auto/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, AutoScaleAxis } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    series: [\n      [\n        { x: 1, y: 100 },\n        { x: 2, y: 50 },\n        { x: 3, y: 25 },\n        { x: 5, y: 12.5 },\n        { x: 8, y: 6.25 }\n      ]\n    ]\n  },\n  {\n    axisX: {\n      type: AutoScaleAxis,\n      onlyInteger: true\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/axis-auto/package.json",
    "content": "{\n  \"name\": \"line-axis-auto\",\n  \"description\": \"Auto scale axis\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/axis-auto/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/axis-fixed-and-auto/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/axis-fixed-and-auto/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport {\n  LineChart,\n  AutoScaleAxis,\n  FixedScaleAxis,\n  Interpolation\n} from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    series: [\n      [\n        { x: 1, y: 100 },\n        { x: 2, y: 50 },\n        { x: 3, y: 25 },\n        { x: 5, y: 12.5 },\n        { x: 8, y: 6.25 }\n      ]\n    ]\n  },\n  {\n    axisX: {\n      type: AutoScaleAxis,\n      onlyInteger: true\n    },\n    axisY: {\n      type: FixedScaleAxis,\n      ticks: [0, 50, 75, 87.5, 100],\n      low: 0\n    },\n    lineSmooth: Interpolation.step(),\n    showPoint: false\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/axis-fixed-and-auto/package.json",
    "content": "{\n  \"name\": \"line-axis-fixed-and-auto\",\n  \"description\": \"Fixed and auto scale axis\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/axis-fixed-and-auto/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/bipolar-area/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/bipolar-area/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5, 6, 7, 8],\n    series: [\n      [1, 2, 3, 1, -2, 0, 1, 0],\n      [-2, -1, -2, -1, -2.5, -1, -2, -1],\n      [0, 0, 0, 1, 2, 2.5, 2, 1],\n      [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]\n    ]\n  },\n  {\n    high: 3,\n    low: -3,\n    showArea: true,\n    showLine: false,\n    showPoint: false,\n    fullWidth: true,\n    axisX: {\n      showLabel: false,\n      showGrid: false\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/bipolar-area/package.json",
    "content": "{\n  \"name\": \"line-bipolar-area\",\n  \"description\": \"Bi-polar Line chart with area only\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/bipolar-area/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/data-fill-holes/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/data-fill-holes/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],\n    series: [\n      [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],\n      [\n        10,\n        15,\n        null,\n        12,\n        null,\n        10,\n        12,\n        15,\n        null,\n        null,\n        12,\n        null,\n        14,\n        null,\n        null,\n        null\n      ],\n      [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],\n      [\n        { x: 3, y: 3 },\n        { x: 4, y: 3 },\n        { x: 5, y: undefined },\n        { x: 6, y: 4 },\n        { x: 7, y: null },\n        { x: 8, y: 4 },\n        { x: 9, y: 4 }\n      ]\n    ]\n  },\n  {\n    fullWidth: true,\n    chartPadding: {\n      right: 10\n    },\n    lineSmooth: Interpolation.cardinal({\n      fillHoles: true\n    }),\n    low: 0\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/data-fill-holes/package.json",
    "content": "{\n  \"name\": \"line-data-fill-holes\",\n  \"description\": \"Filled holes in data\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/data-fill-holes/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/data-holes/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/data-holes/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],\n    series: [\n      [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],\n      [\n        10,\n        15,\n        null,\n        12,\n        null,\n        10,\n        12,\n        15,\n        null,\n        null,\n        12,\n        null,\n        14,\n        null,\n        null,\n        null\n      ],\n      [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],\n      [\n        { x: 3, y: 3 },\n        { x: 4, y: 3 },\n        { x: 5, y: undefined },\n        { x: 6, y: 4 },\n        { x: 7, y: null },\n        { x: 8, y: 4 },\n        { x: 9, y: 4 }\n      ]\n    ]\n  },\n  {\n    fullWidth: true,\n    chartPadding: {\n      right: 10\n    },\n    low: 0\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/data-holes/package.json",
    "content": "{\n  \"name\": \"line-data-holes\",\n  \"description\": \"Holes in data\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/data-holes/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/modify-drawing/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/modify-drawing/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, Svg } from 'chartist';\n\nconst chart = new LineChart('#chart', {\n  labels: [1, 2, 3, 4, 5],\n  series: [[12, 9, 7, 8, 5]]\n});\n\n// Listening for draw events that get emitted by the Chartist chart\nchart.on('draw', data => {\n  // If the draw event was triggered from drawing a point on the line chart\n  if (data.type === 'point') {\n    // We are creating a new path SVG element that draws a triangle around the point coordinates\n    const triangle = new Svg(\n      'path',\n      {\n        d: [\n          'M',\n          data.x,\n          data.y - 15,\n          'L',\n          data.x - 15,\n          data.y + 8,\n          'L',\n          data.x + 15,\n          data.y + 8,\n          'z'\n        ].join(' '),\n        style: 'fill-opacity: 1'\n      },\n      'ct-area'\n    );\n\n    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle\n    data.element.replace(triangle);\n  }\n});\n"
  },
  {
    "path": "sandboxes/line/modify-drawing/package.json",
    "content": "{\n  \"name\": \"line-modify-drawing\",\n  \"description\": \"Using events to replace graphics\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/modify-drawing/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/only-integer/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/only-integer/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5, 6, 7, 8],\n    series: [\n      [1, 2, 3, 1, -2, 0, 1, 0],\n      [-2, -1, -2, -1, -3, -1, -2, -1],\n      [0, 0, 0, 1, 2, 3, 2, 1],\n      [3, 2, 1, 0.5, 1, 0, -1, -3]\n    ]\n  },\n  {\n    high: 3,\n    low: -3,\n    fullWidth: true,\n    // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis\n    axisY: {\n      onlyInteger: true,\n      offset: 20\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/only-integer/package.json",
    "content": "{\n  \"name\": \"line-only-integer\",\n  \"description\": \"Only whole numbers\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/only-integer/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/path-animation/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/path-animation/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, easings } from 'chartist';\n\nconst chart = new LineChart(\n  '#chart',\n  {\n    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n    series: [\n      [1, 5, 2, 5, 4, 3],\n      [2, 3, 4, 8, 1, 2],\n      [5, 4, 3, 2, 1, 0.5]\n    ]\n  },\n  {\n    low: 0,\n    showArea: true,\n    showPoint: false,\n    fullWidth: true\n  }\n);\n\nchart.on('draw', data => {\n  if (data.type === 'line' || data.type === 'area') {\n    data.element.animate({\n      d: {\n        begin: 2000 * data.index,\n        dur: 2000,\n        from: data.path\n          .clone()\n          .scale(1, 0)\n          .translate(0, data.chartRect.height())\n          .stringify(),\n        to: data.path.clone().stringify(),\n        easing: easings.easeOutQuint\n      }\n    });\n  }\n});\n"
  },
  {
    "path": "sandboxes/line/path-animation/package.json",
    "content": "{\n  \"name\": \"line-path-animation\",\n  \"description\": \"SVG Path animation\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/path-animation/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/scatter-random/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/scatter-random/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, times } from 'chartist';\n\nconst data = times(52).reduce<{\n  labels: number[];\n  series: number[][];\n}>(\n  (accData, _, index) => {\n    accData.labels.push(index + 1);\n    accData.series.forEach(series => {\n      series.push(Math.random() * 100);\n    });\n\n    return accData;\n  },\n  {\n    labels: [],\n    series: times(4).map(() => [])\n  }\n);\n\nnew LineChart(\n  '#chart',\n  data,\n  {\n    showLine: false,\n    axisX: {\n      labelInterpolationFnc(value, index) {\n        return index % 13 === 0 ? 'W' + value : null;\n      }\n    }\n  },\n  [\n    [\n      'screen and (min-width: 640px)',\n      {\n        axisX: {\n          labelInterpolationFnc(value, index) {\n            return index % 4 === 0 ? 'W' + value : null;\n          }\n        }\n      }\n    ]\n  ]\n);\n"
  },
  {
    "path": "sandboxes/line/scatter-random/package.json",
    "content": "{\n  \"name\": \"line-scatter-random\",\n  \"description\": \"Line scatter diagram with responsive settings\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/scatter-random/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/series-override/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/series-override/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: ['1', '2', '3', '4', '5', '6', '7', '8'],\n    // Naming the series with the series object array notation\n    series: [\n      {\n        name: 'series-1',\n        data: [5, 2, -4, 2, 0, -2, 5, -3]\n      },\n      {\n        name: 'series-2',\n        data: [4, 3, 5, 3, 1, 3, 6, 4]\n      },\n      {\n        name: 'series-3',\n        data: [2, 4, 3, 1, 4, 5, 3, 2]\n      }\n    ]\n  },\n  {\n    fullWidth: true,\n    // Within the series options you can use the series names\n    // to specify configuration that will only be used for the\n    // specific series.\n    series: {\n      'series-1': {\n        lineSmooth: Interpolation.step()\n      },\n      'series-2': {\n        lineSmooth: Interpolation.simple(),\n        showArea: true\n      },\n      'series-3': {\n        showPoint: false\n      }\n    }\n  },\n  [\n    // You can even use responsive configuration overrides to\n    // customize your series configuration even further!\n    [\n      'screen and (max-width: 320px)',\n      {\n        series: {\n          'series-1': {\n            lineSmooth: Interpolation.none()\n          },\n          'series-2': {\n            lineSmooth: Interpolation.none(),\n            showArea: false\n          },\n          'series-3': {\n            lineSmooth: Interpolation.none(),\n            showPoint: true\n          }\n        }\n      }\n    ]\n  ]\n);\n"
  },
  {
    "path": "sandboxes/line/series-override/package.json",
    "content": "{\n  \"name\": \"line-series-override\",\n  \"description\": \"Series Overrides\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/series-override/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/simple/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/simple/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n    series: [\n      [12, 9, 7, 8, 5],\n      [2, 1, 3.5, 7, 3],\n      [1, 3, 4, 5, 6]\n    ]\n  },\n  {\n    fullWidth: true,\n    chartPadding: {\n      right: 40\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/simple/package.json",
    "content": "{\n  \"name\": \"line-simple\",\n  \"description\": \"Simple line chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/simple/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/simple-responsive/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/simple-responsive/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, LineChartOptions, ResponsiveOptions } from 'chartist';\n\n/* Add a basic data series with six labels and values */\nconst data = {\n  labels: ['1', '2', '3', '4', '5', '6'],\n  series: [\n    {\n      data: [1, 2, 3, 5, 8, 13]\n    }\n  ]\n};\n\n/* 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. */\nconst options: LineChartOptions = {\n  axisX: {\n    labelInterpolationFnc: value => 'Calendar Week ' + value\n  }\n};\n\n/* 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. */\nconst responsiveOptions: ResponsiveOptions<LineChartOptions> = [\n  [\n    'screen and (min-width: 641px) and (max-width: 1024px)',\n    {\n      showPoint: false,\n      axisX: {\n        labelInterpolationFnc: value => 'Week ' + value\n      }\n    }\n  ],\n  [\n    'screen and (max-width: 640px)',\n    {\n      showLine: false,\n      axisX: {\n        labelInterpolationFnc: value => 'W' + value\n      }\n    }\n  ]\n];\n\n/* Initialize the chart with the above settings */\nnew LineChart('#chart', data, options, responsiveOptions);\n"
  },
  {
    "path": "sandboxes/line/simple-responsive/package.json",
    "content": "{\n  \"name\": \"line-simple-responsive\",\n  \"description\": \"Simple responsive options\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/simple-responsive/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/simple-smoothing/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/simple-smoothing/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    labels: [1, 2, 3, 4, 5],\n    series: [\n      [1, 5, 10, 0, 1],\n      [10, 15, 0, 1, 2]\n    ]\n  },\n  {\n    // Remove this configuration to see that chart rendered with cardinal spline interpolation\n    // Sometimes, on large jumps in data values, it's better to use simple smoothing.\n    lineSmooth: Interpolation.simple({\n      divisor: 2\n    }),\n    fullWidth: true,\n    chartPadding: {\n      right: 20\n    },\n    low: 0\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/simple-smoothing/package.json",
    "content": "{\n  \"name\": \"line-simple-smoothing\",\n  \"description\": \"Line Interpolation / Smoothing\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/simple-smoothing/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/simple-svg-animation/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/simple-svg-animation/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, easings } from 'chartist';\n\nconst chart = new LineChart(\n  '#chart',\n  {\n    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],\n    series: [\n      [12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],\n      [4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]\n    ]\n  },\n  {\n    low: 0,\n    showLine: false,\n    axisX: {\n      showLabel: false,\n      offset: 0\n    },\n    axisY: {\n      showLabel: false,\n      offset: 0\n    }\n  }\n);\n\n// Let's put a sequence number aside so we can use it in the event callbacks\nlet seq = 0;\n\n// Once the chart is fully created we reset the sequence\nchart.on('created', () => {\n  seq = 0;\n});\n\n// On each drawn element by Chartist we use the Svg API to trigger SMIL animations\nchart.on('draw', data => {\n  if (data.type === 'point') {\n    // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.\n    data.element.animate({\n      opacity: {\n        // The delay when we like to start the animation\n        begin: seq++ * 80,\n        // Duration of the animation\n        dur: 500,\n        // The value where the animation should start\n        from: 0,\n        // The value where it should end\n        to: 1\n      },\n      x1: {\n        begin: seq++ * 80,\n        dur: 500,\n        from: data.x - 100,\n        to: data.x,\n        // You can specify an easing function name or use easing functions from `easings` directly\n        easing: easings.easeOutQuart\n      }\n    });\n  }\n});\n\nlet timerId: any;\n\n// For the sake of the example we update the chart every time it's created with a delay of 8 seconds\nchart.on('created', () => {\n  if (timerId) {\n    clearTimeout(timerId);\n  }\n\n  timerId = setTimeout(chart.update.bind(chart), 8000);\n});\n"
  },
  {
    "path": "sandboxes/line/simple-svg-animation/package.json",
    "content": "{\n  \"name\": \"line-simple-svg-animation\",\n  \"description\": \"Simple SMIL Animations\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/simple-svg-animation/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/svg-animation/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/svg-animation/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nconst chart = new LineChart(\n  '#chart',\n  {\n    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],\n    series: [\n      [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],\n      [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],\n      [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],\n      [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]\n    ]\n  },\n  {\n    low: 0\n  }\n);\n\n// Let's put a sequence number aside so we can use it in the event callbacks\nlet seq = 0;\nconst delays = 80;\nconst durations = 500;\n\n// Once the chart is fully created we reset the sequence\nchart.on('created', () => {\n  seq = 0;\n});\n\n// On each drawn element by Chartist we use the Svg API to trigger SMIL animations\nchart.on('draw', data => {\n  seq++;\n\n  if (data.type === 'line') {\n    // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.\n    data.element.animate({\n      opacity: {\n        // The delay when we like to start the animation\n        begin: seq * delays + 1000,\n        // Duration of the animation\n        dur: durations,\n        // The value where the animation should start\n        from: 0,\n        // The value where it should end\n        to: 1\n      }\n    });\n  } else if (data.type === 'label' && data.axis.counterUnits.pos === 'x') {\n    data.element.animate({\n      y: {\n        begin: seq * delays,\n        dur: durations,\n        from: data.y + 100,\n        to: data.y,\n        // We can specify an easing function from Svg.Easing\n        easing: 'easeOutQuart'\n      }\n    });\n  } else if (data.type === 'label' && data.axis.counterUnits.pos === 'y') {\n    data.element.animate({\n      x: {\n        begin: seq * delays,\n        dur: durations,\n        from: data.x - 100,\n        to: data.x,\n        easing: 'easeOutQuart'\n      }\n    });\n  } else if (data.type === 'point') {\n    data.element.animate({\n      x1: {\n        begin: seq * delays,\n        dur: durations,\n        from: data.x - 10,\n        to: data.x,\n        easing: 'easeOutQuart'\n      },\n      x2: {\n        begin: seq * delays,\n        dur: durations,\n        from: data.x - 10,\n        to: data.x,\n        easing: 'easeOutQuart'\n      },\n      opacity: {\n        begin: seq * delays,\n        dur: durations,\n        from: 0,\n        to: 1,\n        easing: 'easeOutQuart'\n      }\n    });\n  } else if (data.type === 'grid') {\n    // Using data.axis we get x or y which we can use to construct our animation definition objects\n    const pos1Key = (data.axis.units.pos +\n      '1') as `${typeof data.axis.units.pos}1`;\n    const pos1Value = data[pos1Key];\n    const pos1Animation = {\n      begin: seq * delays,\n      dur: durations,\n      from: pos1Value - 30,\n      to: pos1Value,\n      easing: 'easeOutQuart' as const\n    };\n\n    const pos2Key = (data.axis.units.pos +\n      '2') as `${typeof data.axis.units.pos}2`;\n    const pos2Value = data[pos2Key];\n    const pos2Animation = {\n      begin: seq * delays,\n      dur: durations,\n      from: pos2Value - 100,\n      to: pos2Value,\n      easing: 'easeOutQuart' as const\n    };\n\n    const animations = {\n      [data.axis.units.pos + '1']: pos1Animation,\n      [data.axis.units.pos + '2']: pos2Animation,\n      opacity: {\n        begin: seq * delays,\n        dur: durations,\n        from: 0,\n        to: 1,\n        easing: 'easeOutQuart' as const\n      }\n    };\n\n    data.element.animate(animations);\n  }\n});\n\nlet timerId: any;\n\n// For the sake of the example we update the chart every time it's created with a delay of 8 seconds\nchart.on('created', () => {\n  if (timerId) {\n    clearTimeout(timerId);\n  }\n\n  timerId = setTimeout(chart.update.bind(chart), 12000);\n});\n"
  },
  {
    "path": "sandboxes/line/svg-animation/package.json",
    "content": "{\n  \"name\": \"line-svg-animation\",\n  \"description\": \"Advanced SMIL Animations\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/svg-animation/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/line/timeseries/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/line/timeseries/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { LineChart, FixedScaleAxis } from 'chartist';\n\nnew LineChart(\n  '#chart',\n  {\n    series: [\n      {\n        name: 'series-1',\n        data: [\n          { x: new Date(143134652600), y: 53 },\n          { x: new Date(143234652600), y: 40 },\n          { x: new Date(143340052600), y: 45 },\n          { x: new Date(143366652600), y: 40 },\n          { x: new Date(143410652600), y: 20 },\n          { x: new Date(143508652600), y: 32 },\n          { x: new Date(143569652600), y: 18 },\n          { x: new Date(143579652600), y: 11 }\n        ]\n      },\n      {\n        name: 'series-2',\n        data: [\n          { x: new Date(143134652600), y: 53 },\n          { x: new Date(143234652600), y: 35 },\n          { x: new Date(143334652600), y: 30 },\n          { x: new Date(143384652600), y: 30 },\n          { x: new Date(143568652600), y: 10 }\n        ]\n      }\n    ]\n  },\n  {\n    axisX: {\n      type: FixedScaleAxis,\n      divisor: 5,\n      labelInterpolationFnc: value =>\n        new Date(value).toLocaleString(undefined, {\n          month: 'short',\n          day: 'numeric'\n        })\n    }\n  }\n);\n"
  },
  {
    "path": "sandboxes/line/timeseries/package.json",
    "content": "{\n  \"name\": \"line-timeseries\",\n  \"description\": \"Timeseries\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/line/timeseries/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/pie/custom-labels/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/pie/custom-labels/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { PieChart, PieChartOptions, ResponsiveOptions } from 'chartist';\n\nconst data = {\n  labels: ['Bananas', 'Apples', 'Grapes'],\n  series: [20, 15, 40]\n};\n\nconst options: PieChartOptions = {\n  labelInterpolationFnc: value => String(value)[0]\n};\n\nconst responsiveOptions: ResponsiveOptions<PieChartOptions> = [\n  [\n    'screen and (min-width: 640px)',\n    {\n      chartPadding: 30,\n      labelOffset: 100,\n      labelDirection: 'explode',\n      labelInterpolationFnc: value => value\n    }\n  ],\n  [\n    'screen and (min-width: 1024px)',\n    {\n      labelOffset: 80,\n      chartPadding: 20\n    }\n  ]\n];\n\nnew PieChart('#chart', data, options, responsiveOptions);\n"
  },
  {
    "path": "sandboxes/pie/custom-labels/package.json",
    "content": "{\n  \"name\": \"pie-custom-labels\",\n  \"description\": \"Pie chart with custom labels\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/pie/custom-labels/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/pie/donut-animation/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/pie/donut-animation/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { PieChart, easings, AnimationDefinition } from 'chartist';\n\nconst chart = new PieChart(\n  '#chart',\n  {\n    series: [10, 20, 50, 20, 5, 50, 15],\n    labels: [1, 2, 3, 4, 5, 6, 7]\n  },\n  {\n    donut: true,\n    showLabel: false\n  }\n);\n\nchart.on('draw', data => {\n  if (data.type === 'slice') {\n    // Get the total path length in order to use for dash array animation\n    const pathLength = data.element\n      .getNode<SVGGeometryElement>()\n      .getTotalLength();\n\n    // Set a dasharray that matches the path length as prerequisite to animate dashoffset\n    data.element.attr({\n      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'\n    });\n\n    // Create animation definition while also assigning an ID to the animation for later sync usage\n    const animationDefinition: Record<string, AnimationDefinition> = {\n      'stroke-dashoffset': {\n        id: 'anim' + data.index,\n        dur: 1000,\n        from: -pathLength + 'px',\n        to: '0px',\n        easing: easings.easeOutQuint,\n        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)\n        fill: 'freeze'\n      }\n    };\n\n    // 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\n    if (data.index !== 0) {\n      animationDefinition['stroke-dashoffset'].begin =\n        'anim' + (data.index - 1) + '.end';\n    }\n\n    // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us\n    data.element.attr({\n      'stroke-dashoffset': -pathLength + 'px'\n    });\n\n    // We can't use guided mode as the animations need to rely on setting begin manually\n    data.element.animate(animationDefinition, false);\n  }\n});\n\nlet timerId: any;\n\n// For the sake of the example we update the chart every time it's created with a delay of 8 seconds\nchart.on('created', () => {\n  if (timerId) {\n    clearTimeout(timerId);\n  }\n\n  timerId = setTimeout(chart.update.bind(chart), 10000);\n});\n"
  },
  {
    "path": "sandboxes/pie/donut-animation/package.json",
    "content": "{\n  \"name\": \"pie-donut-animation\",\n  \"description\": \"Animating a Donut with Svg.animate\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/pie/donut-animation/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/pie/donut-chart/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/pie/donut-chart/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nnew PieChart(\n  '#chart',\n  {\n    series: [20, 10, 30, 40]\n  },\n  {\n    donut: true,\n    donutWidth: 60,\n    startAngle: 270,\n    showLabel: true\n  }\n);\n"
  },
  {
    "path": "sandboxes/pie/donut-chart/package.json",
    "content": "{\n  \"name\": \"pie-donut-chart\",\n  \"description\": \"Donut chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/pie/donut-chart/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/pie/simple/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/pie/simple/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nconst data = {\n  series: [5, 3, 4]\n};\n\nnew PieChart('#chart', data, {\n  labelInterpolationFnc: value =>\n    Math.round((+value / data.series.reduce((a, b) => a + b)) * 100) + '%'\n});\n"
  },
  {
    "path": "sandboxes/pie/simple/package.json",
    "content": "{\n  \"name\": \"pie-simple\",\n  \"description\": \"Simple pie chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/pie/simple/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/pie/simple-gauge/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <script defer src=\"./index.ts\"></script>\n  </head>\n  <body>\n    <div id=\"chart\" style=\"height: 50vh\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "sandboxes/pie/simple-gauge/index.ts",
    "content": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nnew PieChart(\n  '#chart',\n  {\n    series: [20, 10, 30, 40]\n  },\n  {\n    donut: true,\n    donutWidth: 60,\n    startAngle: 270,\n    total: 200,\n    showLabel: false\n  }\n);\n"
  },
  {
    "path": "sandboxes/pie/simple-gauge/package.json",
    "content": "{\n  \"name\": \"pie-simple-gauge\",\n  \"description\": \"Gauge chart\",\n  \"main\": \"index.ts\",\n  \"dependencies\": {\n    \"chartist\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "sandboxes/pie/simple-gauge/sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": true,\n  \"view\": \"browser\",\n  \"template\": \"parcel\"\n}\n"
  },
  {
    "path": "sandboxes/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"chartist\": [\"../src\"]\n    }\n  },\n  \"include\": [\".\"]\n}\n"
  },
  {
    "path": "scripts/styles.cjs",
    "content": "#!/usr/bin/env node\n\nconst fs = require('fs').promises;\nconst path = require('path');\nconst sass = require('sass');\nconst postcss = require('postcss');\n\nconst { plugins } = require('../postcss.config.cjs');\nconst pkg = require('../package.json');\n\nconst cwd = process.cwd();\nconst input = process.argv[2];\nconst output = pkg.style;\nconst sourceMapOutput = output.replace('.css', '.css.map');\n\nasync function compile() {\n  let styles;\n\n  styles = sass.compile(input, {\n    sourceMap: true\n  });\n\n  styles.sourceMap.sources = styles.sourceMap.sources.map(_ =>\n    _.replace(cwd, '')\n  );\n\n  styles = await postcss(plugins).process(styles.css, {\n    from: input,\n    to: output,\n    map: {\n      prev: styles.sourceMap\n    }\n  });\n\n  const map = styles.map.toString();\n  const css =\n    styles.css + `\\n/*# sourceMappingURL=${path.basename(sourceMapOutput)} */`;\n\n  await fs.mkdir(path.dirname(output), {\n    recursive: true\n  });\n  await Promise.all([\n    fs.writeFile(output, css),\n    fs.writeFile(sourceMapOutput, map)\n  ]);\n}\n\nasync function copySrc() {\n  const srcDir = path.dirname(input);\n  const distDir = path.dirname(output);\n  const srcFiles = await fs.readdir(srcDir);\n\n  await Promise.all(\n    srcFiles.map(file =>\n      fs.copyFile(path.join(srcDir, file), path.join(distDir, file))\n    )\n  );\n}\n\nPromise.all([compile(), copySrc()]);\n"
  },
  {
    "path": "src/axes/AutoScaleAxis.ts",
    "content": "import type {\n  ChartRect,\n  AxisOptions,\n  Bounds,\n  NormalizedSeries,\n  NormalizedSeriesPrimitiveValue\n} from '../core';\nimport { getBounds, getHighLow, getMultiValue } from '../core';\nimport { AxisUnits, Axis } from './Axis';\n\nexport class AutoScaleAxis extends Axis {\n  private readonly bounds: Bounds;\n  public override readonly range: {\n    min: number;\n    max: number;\n  };\n\n  constructor(\n    axisUnit: AxisUnits,\n    data: NormalizedSeries[],\n    chartRect: ChartRect,\n    options: AxisOptions\n  ) {\n    // Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options\n    const highLow = options.highLow || getHighLow(data, options, axisUnit.pos);\n    const bounds = getBounds(\n      chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart],\n      highLow,\n      options.scaleMinSpace || 20,\n      options.onlyInteger\n    );\n    const range = {\n      min: bounds.min,\n      max: bounds.max\n    };\n\n    super(axisUnit, chartRect, bounds.values);\n\n    this.bounds = bounds;\n    this.range = range;\n  }\n\n  projectValue(value: NormalizedSeriesPrimitiveValue) {\n    const finalValue = Number(getMultiValue(value, this.units.pos));\n\n    return (\n      (this.axisLength * (finalValue - this.bounds.min)) / this.bounds.range\n    );\n  }\n}\n"
  },
  {
    "path": "src/axes/Axis.spec.ts",
    "content": "import type { ChartRect } from '../core';\nimport { Svg } from '../svg';\nimport { EventEmitter } from '../event';\nimport { Axis, axisUnits } from './Axis';\n\nclass MockAxis extends Axis {\n  projectValue(value: number) {\n    return value;\n  }\n}\n\ndescribe('Axes', () => {\n  describe('Axis', () => {\n    let ticks: number[];\n    let chartRect: ChartRect;\n    let chartOptions: any;\n    let eventEmitter: EventEmitter;\n    let gridGroup: Svg;\n    let labelGroup: Svg;\n\n    beforeEach(() => {\n      eventEmitter = new EventEmitter();\n      gridGroup = new Svg('g');\n      labelGroup = new Svg('g');\n      ticks = [1, 2];\n      chartRect = {\n        padding: {\n          bottom: 5,\n          left: 10,\n          right: 15,\n          top: 15\n        },\n        y2: 15,\n        y1: 250,\n        x1: 50,\n        x2: 450,\n        width() {\n          return this.x2 - this.x1;\n        },\n        height() {\n          return this.y1 - this.y2;\n        }\n      };\n\n      chartOptions = {\n        axisX: {\n          offset: 30,\n          position: 'end',\n          labelOffset: {\n            x: 0,\n            y: 0\n          },\n          showLabel: true,\n          showGrid: true\n        },\n        classNames: {\n          label: 'ct-label',\n          labelGroup: 'ct-labels',\n          grid: 'ct-grid',\n          gridGroup: 'ct-grids',\n          vertical: 'ct-vertical',\n          horizontal: 'ct-horizontal',\n          start: 'ct-start',\n          end: 'ct-end'\n        }\n      };\n    });\n\n    it('should skip all grid lines and labels for interpolated value of null', () => {\n      chartOptions.axisX.labelInterpolationFnc = (\n        value: number,\n        index: number\n      ) => (index === 0 ? null : value);\n\n      const axis = new MockAxis(axisUnits.x, chartRect, ticks);\n\n      axis.createGridAndLabels(\n        gridGroup,\n        labelGroup,\n        chartOptions,\n        eventEmitter\n      );\n      expect(\n        (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length\n      ).toBe(1);\n      expect(\n        (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length\n      ).toBe(1);\n    });\n\n    it('should skip all grid lines and labels for interpolated value of undefined', () => {\n      chartOptions.axisX.labelInterpolationFnc = (\n        value: number,\n        index: number\n      ) => (index === 0 ? undefined : value);\n\n      const axis = new MockAxis(axisUnits.x, chartRect, ticks);\n\n      axis.createGridAndLabels(\n        gridGroup,\n        labelGroup,\n        chartOptions,\n        eventEmitter\n      );\n      expect(\n        (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length\n      ).toBe(1);\n      expect(\n        (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length\n      ).toBe(1);\n    });\n\n    it('should include all grid lines and labels for interpolated value of empty strings', () => {\n      chartOptions.axisX.labelInterpolationFnc = (\n        value: number,\n        index: number\n      ) => (index === 0 ? '' : value);\n\n      const axis = new MockAxis(axisUnits.x, chartRect, ticks);\n\n      axis.createGridAndLabels(\n        gridGroup,\n        labelGroup,\n        chartOptions,\n        eventEmitter\n      );\n      expect(\n        (gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length\n      ).toBe(2);\n      expect(\n        (labelGroup.querySelectorAll('.ct-label') as any).svgElements.length\n      ).toBe(2);\n    });\n  });\n});\n"
  },
  {
    "path": "src/axes/Axis.ts",
    "content": "import type {\n  Label,\n  ChartRect,\n  OptionsWithDefaults,\n  NormalizedSeriesPrimitiveValue,\n  NormalizedSeries\n} from '../core';\nimport type { Svg } from '../svg';\nimport type { EventEmitter } from '../event';\nimport { isFalseyButZero } from '../utils';\nimport { createGrid, createLabel } from '../core';\n\nexport const axisUnits = {\n  x: {\n    pos: 'x',\n    len: 'width',\n    dir: 'horizontal',\n    rectStart: 'x1',\n    rectEnd: 'x2',\n    rectOffset: 'y2'\n  },\n  y: {\n    pos: 'y',\n    len: 'height',\n    dir: 'vertical',\n    rectStart: 'y2',\n    rectEnd: 'y1',\n    rectOffset: 'x1'\n  }\n} as const;\n\nexport type XAxisUnits = typeof axisUnits.x;\nexport type YAxisUnits = typeof axisUnits.y;\nexport type AxisUnits = XAxisUnits | YAxisUnits;\n\nexport abstract class Axis {\n  public readonly counterUnits: AxisUnits;\n  public readonly range:\n    | {\n        min: number;\n        max: number;\n      }\n    | undefined;\n  readonly axisLength: number;\n  private readonly gridOffset: number;\n\n  constructor(\n    public readonly units: AxisUnits,\n    private readonly chartRect: ChartRect,\n    private readonly ticks: Label[]\n  ) {\n    this.counterUnits = units === axisUnits.x ? axisUnits.y : axisUnits.x;\n    this.axisLength =\n      chartRect[this.units.rectEnd] - chartRect[this.units.rectStart];\n    this.gridOffset = chartRect[this.units.rectOffset];\n  }\n\n  abstract projectValue(\n    value: NormalizedSeriesPrimitiveValue | Label,\n    index?: number,\n    series?: NormalizedSeries\n  ): number;\n\n  createGridAndLabels(\n    gridGroup: Svg,\n    labelGroup: Svg,\n    chartOptions: OptionsWithDefaults,\n    eventEmitter: EventEmitter\n  ) {\n    const axisOptions =\n      this.units.pos === 'x' ? chartOptions.axisX : chartOptions.axisY;\n    const projectedValues = this.ticks.map((tick, i) =>\n      this.projectValue(tick, i)\n    );\n    const labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);\n\n    projectedValues.forEach((projectedValue, index) => {\n      const labelValue = labelValues[index];\n      const labelOffset = {\n        x: 0,\n        y: 0\n      };\n\n      // TODO: Find better solution for solving this problem\n      // Calculate how much space we have available for the label\n      let labelLength;\n      if (projectedValues[index + 1]) {\n        // If we still have one label ahead, we can calculate the distance to the next tick / label\n        labelLength = projectedValues[index + 1] - projectedValue;\n      } else {\n        // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to\n        // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will\n        // still be visible inside of the chart padding.\n        labelLength = Math.max(\n          this.axisLength - projectedValue,\n          this.axisLength / this.ticks.length\n        );\n      }\n\n      // Skip grid lines and labels where interpolated label values are falsey (except for 0)\n      if (labelValue !== '' && isFalseyButZero(labelValue)) {\n        return;\n      }\n\n      // Transform to global coordinates using the chartRect\n      // We also need to set the label offset for the createLabel function\n      if (this.units.pos === 'x') {\n        projectedValue = this.chartRect.x1 + projectedValue;\n        labelOffset.x = chartOptions.axisX.labelOffset.x;\n\n        // If the labels should be positioned in start position (top side for vertical axis) we need to set a\n        // different offset as for positioned with end (bottom)\n        if (chartOptions.axisX.position === 'start') {\n          labelOffset.y =\n            this.chartRect.padding.top + chartOptions.axisX.labelOffset.y + 5;\n        } else {\n          labelOffset.y =\n            this.chartRect.y1 + chartOptions.axisX.labelOffset.y + 5;\n        }\n      } else {\n        projectedValue = this.chartRect.y1 - projectedValue;\n        labelOffset.y = chartOptions.axisY.labelOffset.y - labelLength;\n\n        // If the labels should be positioned in start position (left side for horizontal axis) we need to set a\n        // different offset as for positioned with end (right side)\n        if (chartOptions.axisY.position === 'start') {\n          labelOffset.x =\n            this.chartRect.padding.left + chartOptions.axisY.labelOffset.x;\n        } else {\n          labelOffset.x =\n            this.chartRect.x2 + chartOptions.axisY.labelOffset.x + 10;\n        }\n      }\n\n      if (axisOptions.showGrid) {\n        createGrid(\n          projectedValue,\n          index,\n          this,\n          this.gridOffset,\n          this.chartRect[this.counterUnits.len](),\n          gridGroup,\n          [\n            chartOptions.classNames.grid,\n            chartOptions.classNames[this.units.dir]\n          ],\n          eventEmitter\n        );\n      }\n\n      if (axisOptions.showLabel) {\n        createLabel(\n          projectedValue,\n          labelLength,\n          index,\n          labelValue,\n          this,\n          axisOptions.offset,\n          labelOffset,\n          labelGroup,\n          [\n            chartOptions.classNames.label,\n            chartOptions.classNames[this.units.dir],\n            axisOptions.position === 'start'\n              ? chartOptions.classNames[axisOptions.position]\n              : chartOptions.classNames.end\n          ],\n          eventEmitter\n        );\n      }\n    });\n  }\n}\n"
  },
  {
    "path": "src/axes/FixedScaleAxis.spec.ts",
    "content": "import { FixedScaleAxis } from './FixedScaleAxis';\n\ndescribe('Axes', () => {\n  describe('FixedScaleAxis', () => {\n    it('should order the tick array', () => {\n      const ticks = [10, 5, 0, -5, -10];\n      const axisUnit = {\n        pos: 'y',\n        len: 'height',\n        dir: 'vertical',\n        rectStart: 'y2',\n        rectEnd: 'y1',\n        rectOffset: 'x1'\n      } as const;\n      const data = [\n        [\n          { x: 1, y: 10 },\n          { x: 2, y: 5 },\n          { x: 3, y: -5 }\n        ]\n      ];\n      const chartRect: any = {\n        padding: {\n          top: 15,\n          right: 15,\n          bottom: 5,\n          left: 10\n        },\n        y2: 15,\n        y1: 141,\n        x1: 50,\n        x2: 269\n      };\n      const options = {\n        offset: 40,\n        position: 'start' as const,\n        labelOffset: { x: 0, y: 0 },\n        showLabel: true,\n        showGrid: true,\n        scaleMinSpace: 20,\n        onlyInteger: false,\n        ticks\n      };\n      const fsaxis: any = new FixedScaleAxis(\n        axisUnit,\n        data,\n        chartRect,\n        options\n      );\n      expect(fsaxis.ticks).toEqual([-10, -5, 0, 5, 10]);\n    });\n  });\n});\n"
  },
  {
    "path": "src/axes/FixedScaleAxis.ts",
    "content": "import type {\n  ChartRect,\n  AxisOptions,\n  NormalizedSeries,\n  NormalizedSeriesPrimitiveValue\n} from '../core';\nimport { getMultiValue, getHighLow } from '../core/data';\nimport { times } from '../utils';\nimport { AxisUnits, Axis } from './Axis';\n\nexport class FixedScaleAxis extends Axis {\n  public override readonly range: {\n    min: number;\n    max: number;\n  };\n\n  constructor(\n    axisUnit: AxisUnits,\n    data: NormalizedSeries[],\n    chartRect: ChartRect,\n    options: AxisOptions\n  ) {\n    const highLow = options.highLow || getHighLow(data, options, axisUnit.pos);\n    const divisor = options.divisor || 1;\n    const ticks = (\n      options.ticks ||\n      times(\n        divisor,\n        index => highLow.low + ((highLow.high - highLow.low) / divisor) * index\n      )\n    ).sort((a, b) => Number(a) - Number(b));\n    const range = {\n      min: highLow.low,\n      max: highLow.high\n    };\n\n    super(axisUnit, chartRect, ticks);\n\n    this.range = range;\n  }\n\n  projectValue(value: NormalizedSeriesPrimitiveValue) {\n    const finalValue = Number(getMultiValue(value, this.units.pos));\n\n    return (\n      (this.axisLength * (finalValue - this.range.min)) /\n      (this.range.max - this.range.min)\n    );\n  }\n}\n"
  },
  {
    "path": "src/axes/StepAxis.spec.ts",
    "content": "import { StepAxis } from './StepAxis';\n\ndescribe('Axes', () => {\n  describe('StepAxis', () => {\n    it('should return 0 if options.ticks.length == 1', () => {\n      const ticks = [1];\n      const axisUnit = {\n        pos: 'y',\n        len: 'height',\n        dir: 'vertical',\n        rectStart: 'y2',\n        rectEnd: 'y1',\n        rectOffset: 'x1'\n      } as const;\n      const data = [[1]];\n      const chartRect: any = {\n        y2: 0,\n        y1: 15,\n        x1: 50,\n        x2: 100\n      };\n      const options = {\n        ticks\n      };\n      const stepAxis: any = new StepAxis(axisUnit, data, chartRect, options);\n      expect(stepAxis.stepLength).toEqual(15);\n    });\n  });\n});\n"
  },
  {
    "path": "src/axes/StepAxis.ts",
    "content": "import type { ChartRect, AxisOptions } from '../core';\nimport { AxisUnits, Axis } from './Axis';\n\nexport class StepAxis extends Axis {\n  private readonly stepLength: number;\n  public readonly stretch: boolean;\n\n  constructor(\n    axisUnit: AxisUnits,\n    _data: unknown,\n    chartRect: ChartRect,\n    options: AxisOptions\n  ) {\n    const ticks = options.ticks || [];\n\n    super(axisUnit, chartRect, ticks);\n\n    const calc = Math.max(1, ticks.length - (options.stretch ? 1 : 0));\n    this.stepLength = this.axisLength / calc;\n    this.stretch = Boolean(options.stretch);\n  }\n\n  projectValue(_value: unknown, index: number) {\n    return this.stepLength * index;\n  }\n}\n"
  },
  {
    "path": "src/axes/index.ts",
    "content": "export * from './Axis';\nexport * from './AutoScaleAxis';\nexport * from './FixedScaleAxis';\nexport * from './StepAxis';\nexport * from './types';\n"
  },
  {
    "path": "src/axes/types.ts",
    "content": "import type { AutoScaleAxis } from './AutoScaleAxis';\nimport type { FixedScaleAxis } from './FixedScaleAxis';\nimport type { StepAxis } from './StepAxis';\n\nexport type AxisType =\n  | typeof AutoScaleAxis\n  | typeof FixedScaleAxis\n  | typeof StepAxis;\n"
  },
  {
    "path": "src/charts/BarChart/BarChart.spec.ts",
    "content": "import { AutoScaleAxis } from '../../axes';\nimport { BarChartOptions, BarChartData, BarChart } from '.';\nimport { namespaces, deserialize } from '../../core';\nimport {\n  Fixture,\n  addMockWrapper,\n  destroyMockDom,\n  mockDom,\n  mockDomRects,\n  destroyMockDomRects\n} from '../../../test/mock/dom';\n\ndescribe('Charts', () => {\n  describe('BarChart', () => {\n    let fixture: Fixture;\n    let chart: BarChart;\n    let options: BarChartOptions;\n    let data: BarChartData;\n\n    function createChart() {\n      return new Promise<void>(resolve => {\n        fixture = addMockWrapper(\n          '<div class=\"ct-chart ct-golden-section\"></div>'\n        );\n        const { wrapper } = fixture;\n        chart = new BarChart(\n          wrapper.querySelector('.ct-chart'),\n          data,\n          options\n        ).on('created', () => {\n          resolve();\n          chart.off('created');\n        });\n      });\n    }\n\n    beforeEach(() => {\n      mockDom();\n      mockDomRects();\n    });\n    afterEach(() => {\n      destroyMockDom();\n      destroyMockDomRects();\n      data = { series: [] };\n      options = {};\n    });\n\n    describe('grids', () => {\n      beforeEach(() => {\n        data = {\n          series: [\n            [\n              { x: 1, y: 1 },\n              { x: 3, y: 5 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: AutoScaleAxis,\n            onlyInteger: true\n          },\n          axisY: {\n            type: AutoScaleAxis,\n            onlyInteger: true\n          }\n        };\n      });\n\n      it('should contain ct-grids group', async () => {\n        data = { series: [] };\n        options = {};\n        await createChart();\n\n        expect(fixture.wrapper.querySelectorAll('g.ct-grids').length).toBe(1);\n      });\n\n      it('should draw grid lines', async () => {\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll(\n            'g.ct-grids line.ct-grid.ct-horizontal'\n          ).length\n        ).toBe(3);\n        expect(\n          fixture.wrapper.querySelectorAll(\n            'g.ct-grids line.ct-grid.ct-vertical'\n          ).length\n        ).toBe(6);\n      });\n\n      it('should draw grid background', async () => {\n        options.showGridBackground = true;\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background')\n            .length\n        ).toBe(1);\n      });\n\n      it('should not draw grid background if option set to false', async () => {\n        options.showGridBackground = false;\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background')\n            .length\n        ).toBe(0);\n      });\n    });\n\n    describe('ct:value attribute', () => {\n      it('should contain x and y value for each bar', async () => {\n        data = {\n          series: [\n            [\n              { x: 1, y: 2 },\n              { x: 3, y: 4 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: AutoScaleAxis\n          }\n        };\n        await createChart();\n\n        const bars = fixture.wrapper.querySelectorAll('.ct-bar');\n        expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('1,2');\n        expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('3,4');\n      });\n\n      it('should render values that are zero', async () => {\n        data = {\n          series: [\n            [\n              { x: 0, y: 1 },\n              { x: 2, y: 0 },\n              { x: 0, y: 0 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: AutoScaleAxis\n          }\n        };\n        await createChart();\n\n        const bars = fixture.wrapper.querySelectorAll('.ct-bar');\n        expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('0,1');\n        expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('2,0');\n        expect(bars[2].getAttributeNS(namespaces.ct, 'value')).toEqual('0,0');\n      });\n    });\n\n    describe('Meta data tests', () => {\n      it('should render meta data correctly with mixed value array', async () => {\n        const meta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: meta\n              },\n              0\n            ]\n          ]\n        };\n        await createChart();\n\n        const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3];\n        expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual(\n          meta\n        );\n      });\n\n      it('should render meta data correctly with mixed value array and different normalized data length', async () => {\n        const meta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: meta\n              },\n              0\n            ]\n          ]\n        };\n        await createChart();\n\n        const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3];\n        expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual(\n          meta\n        );\n      });\n\n      it('should render meta data correctly with mixed value array and mixed series notation', async () => {\n        const seriesMeta = 9999;\n        const valueMeta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: valueMeta\n              },\n              0\n            ],\n            {\n              meta: seriesMeta,\n              data: [\n                5,\n                2,\n                {\n                  value: 2,\n                  meta: valueMeta\n                },\n                0\n              ]\n            }\n          ]\n        };\n        await createChart();\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelectorAll('.ct-series-a .ct-bar')[3]\n              .getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(valueMeta);\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelector('.ct-series-b')\n              ?.getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(seriesMeta);\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelectorAll('.ct-series-b .ct-bar')[2]\n              .getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(valueMeta);\n      });\n    });\n\n    describe('Empty data tests', () => {\n      it('should render empty grid with no data', async () => {\n        data = { series: [] };\n        options = {};\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n\n      it('should render empty grid with only labels', async () => {\n        data = {\n          labels: [1, 2, 3, 4],\n          series: []\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n        // Find exactly as many horizontal grid lines as labels were specified (Step Axis)\n        expect(\n          document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length\n        ).toBe(data.labels?.length);\n      });\n\n      it('should generate labels and render empty grid with only series in data', async () => {\n        data = {\n          series: [\n            [1, 2, 3, 4],\n            [2, 3, 4],\n            [3, 4]\n          ]\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n        // Should generate the labels using the largest series count\n        expect(\n          document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length\n        ).toBe(\n          Math.max(\n            ...data.series.map(series =>\n              Array.isArray(series) ? series.length : 0\n            )\n          )\n        );\n      });\n\n      it('should render empty grid with no data and specified high low', async () => {\n        options = {\n          width: 400,\n          height: 300,\n          high: 100,\n          low: -100\n        };\n        await createChart();\n\n        // Find first and last label\n        const labels = document.querySelectorAll(\n          '.ct-labels .ct-label.ct-vertical'\n        );\n        const firstLabel = labels[0];\n        const lastLabel = labels[labels.length - 1];\n\n        expect(firstLabel.textContent?.trim()).toBe('-100');\n        expect(lastLabel.textContent?.trim()).toBe('100');\n      });\n\n      it('should render empty grid with no data and reverseData option', async () => {\n        options = {\n          reverseData: true\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n\n      it('should render empty grid with no data and stackBars option', async () => {\n        options = {\n          stackBars: true\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n\n      it('should render empty grid with no data and horizontalBars option', async () => {\n        options = {\n          horizontalBars: true\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        // TODO: In theory the axis should be created with ct-horizontal class\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n\n      it('should render empty grid with no data and distributeSeries option', async () => {\n        options = {\n          distributeSeries: true\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n    });\n\n    it('should correct apply class names', async () => {\n      data = {\n        labels: ['A', 'B', 'C'],\n        series: [\n          {\n            className: 'series-1',\n            data: [1, 2, 3]\n          },\n          {\n            className: 'series-2',\n            data: [4, 5, 6]\n          }\n        ]\n      };\n      options = {\n        reverseData: true\n      };\n      await createChart();\n\n      const seriesElements = document.querySelectorAll('.ct-series');\n\n      expect(seriesElements[0]).toHaveClass('series-2');\n      expect(seriesElements[0]).toContainHTML('ct:value=\"6\"');\n\n      expect(seriesElements[1]).toHaveClass('series-1');\n      expect(seriesElements[1]).toContainHTML('ct:value=\"3\"');\n    });\n  });\n});\n"
  },
  {
    "path": "src/charts/BarChart/BarChart.stories.ts",
    "content": "import 'chartist-dev/styles';\nimport { BarChart, AutoScaleAxis, Svg, getMultiValue } from 'chartist-dev';\nimport { Viewport } from '../../../test/utils/storyshots/viewport';\n\nexport default {\n  title: 'BarChart',\n  argTypes: {}\n};\n\nexport function Default() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      series: [\n        [\n          { x: 1, y: 1 },\n          { x: 3, y: 5 }\n        ]\n      ]\n    },\n    {\n      axisX: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      },\n      axisY: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function BiPolar() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n      series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]\n    },\n    {\n      high: 10,\n      low: -10,\n      axisX: {\n        labelInterpolationFnc(value, index) {\n          return index % 2 === 0 ? value : null;\n        }\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function Labels() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],\n      series: [[5, 2, 4, 2, 0]]\n    },\n    {}\n  );\n\n  return root;\n}\n\nexport function MultilineLabels() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: [\n        'First quarter of the year',\n        'Second quarter of the year',\n        'Third quarter of the year',\n        'Fourth quarter of the year'\n      ],\n      series: [\n        [60000, 40000, 80000, 70000],\n        [40000, 30000, 70000, 65000],\n        [8000, 3000, 10000, 6000]\n      ]\n    },\n    {\n      seriesBarDistance: 10,\n      axisX: {\n        offset: 60\n      },\n      axisY: {\n        offset: 80,\n        labelInterpolationFnc(value) {\n          return value + ' CHF';\n        },\n        scaleMinSpace: 15\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function LabelsPlacement() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      series: [\n        [5, 4, 3, 7, 5, 10, 3],\n        [3, 2, 9, 5, 4, 6, 4]\n      ]\n    },\n    {\n      axisX: {\n        // On the x-axis start means top and end means bottom\n        position: 'start'\n      },\n      axisY: {\n        // On the y-axis start means left and end means right\n        position: 'end'\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function MultiSeries() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      series: [\n        [1, 2, 3, 4],\n        [2, 3, 4],\n        [3, 4]\n      ]\n    },\n    {}\n  );\n\n  return root;\n}\n\nexport function DistributedSeries() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],\n      series: [20, 60, 120, 200, 180, 20, 10]\n    },\n    {\n      distributeSeries: true\n    }\n  );\n\n  return root;\n}\n\nexport function ReverseData() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      series: [\n        [1, 2, 3, 4],\n        [2, 3, 4],\n        [3, 4]\n      ]\n    },\n    {\n      reverseData: true\n    }\n  );\n\n  return root;\n}\n\nexport function Stack() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n      series: [\n        [800000, 1200000, 1400000, 1300000],\n        [200000, 400000, 500000, 300000],\n        [100000, 200000, 400000, 600000]\n      ]\n    },\n    {\n      stackBars: true,\n      axisY: {\n        labelInterpolationFnc(value) {\n          return Number(value) / 1000 + 'k';\n        }\n      }\n    }\n  ).on('draw', data => {\n    if (data.type === 'bar') {\n      data.element.attr({\n        style: 'stroke-width: 30px'\n      });\n    }\n  });\n\n  return root;\n}\n\nexport function Horizontal() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: [\n        'Monday',\n        'Tuesday',\n        'Wednesday',\n        'Thursday',\n        'Friday',\n        'Saturday',\n        'Sunday'\n      ],\n      series: [\n        [5, 4, 3, 7, 5, 10, 3],\n        [3, 2, 9, 5, 4, 6, 4]\n      ]\n    },\n    {\n      seriesBarDistance: 10,\n      reverseData: true,\n      horizontalBars: true,\n      axisY: {\n        offset: 70\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function Adaptive() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],\n      series: [\n        [5, 4, 3, 7],\n        [3, 2, 9, 5],\n        [1, 5, 8, 4],\n        [2, 3, 4, 6],\n        [4, 1, 2, 1]\n      ]\n    },\n    {\n      // Default mobile configuration\n      stackBars: true,\n      axisX: {\n        labelInterpolationFnc: value =>\n          String(value)\n            .split(/\\s+/)\n            .map(word => word[0])\n            .join('')\n      },\n      axisY: {\n        offset: 20\n      }\n    },\n    [\n      // Options override for media > 400px\n      [\n        'screen and (min-width: 400px)',\n        {\n          reverseData: true,\n          horizontalBars: true,\n          axisX: {\n            labelInterpolationFnc: () => undefined\n          },\n          axisY: {\n            offset: 60\n          }\n        }\n      ],\n      // Options override for media > 800px\n      [\n        'screen and (min-width: 800px)',\n        {\n          stackBars: false,\n          seriesBarDistance: 10\n        }\n      ],\n      // Options override for media > 1000px\n      [\n        'screen and (min-width: 1000px)',\n        {\n          reverseData: false,\n          horizontalBars: false,\n          seriesBarDistance: 15\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n\nAdaptive.parameters = {\n  storyshots: {\n    viewports: [\n      Viewport.Default,\n      Viewport.Tablet,\n      Viewport.MobileLandscape,\n      Viewport.Mobile\n    ]\n  }\n};\n\nexport function OverlappingBarsOnMobile() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: [\n        'Jan',\n        'Feb',\n        'Mar',\n        'Apr',\n        'May',\n        'Jun',\n        'Jul',\n        'Aug',\n        'Sep',\n        'Oct',\n        'Nov',\n        'Dec'\n      ],\n      series: [\n        [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],\n        [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]\n      ]\n    },\n    {\n      seriesBarDistance: 10\n    },\n    [\n      [\n        'screen and (max-width: 640px)',\n        {\n          seriesBarDistance: 5,\n          axisX: {\n            labelInterpolationFnc(value) {\n              return String(value)[0];\n            }\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n\nOverlappingBarsOnMobile.parameters = {\n  storyshots: {\n    viewports: [Viewport.Default, Viewport.Mobile]\n  }\n};\n\nexport function PeakCircles() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n      series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]\n    },\n    {\n      high: 10,\n      low: -10,\n      axisX: {\n        labelInterpolationFnc(value, index) {\n          return index % 2 === 0 ? value : null;\n        }\n      }\n    }\n  ).on('draw', data => {\n    // If this draw event is of type bar we can use the data to create additional content\n    if (data.type === 'bar') {\n      // 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\n      data.group.append(\n        new Svg(\n          'circle',\n          {\n            cx: data.x2,\n            cy: data.y2,\n            r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5\n          },\n          'ct-slice-pie'\n        )\n      );\n    }\n  });\n\n  return root;\n}\n\nexport function AccumulateRelativeStack() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],\n      series: [\n        [5, 4, -3, -5],\n        [5, -4, 3, -5]\n      ]\n    },\n    {\n      stackBars: true,\n      stackMode: 'accumulate-relative'\n    }\n  );\n\n  return root;\n}\n\nexport function ViewBox() {\n  const root = document.createElement('div');\n\n  new BarChart(\n    root,\n    {\n      series: [\n        [\n          { x: 1, y: 1 },\n          { x: 3, y: 5 }\n        ]\n      ]\n    },\n    {\n      axisX: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      },\n      axisY: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      },\n      viewBox: {\n        width: 800,\n        height: 300\n      }\n    },\n    [\n      [\n        'screen and (max-width: 575px)',\n        {\n          viewBox: {\n            width: 400,\n            height: 150\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n"
  },
  {
    "path": "src/charts/BarChart/BarChart.ts",
    "content": "import type { Axis } from '../../axes';\nimport type {\n  BarChartData,\n  BarChartOptions,\n  BarChartOptionsWithDefaults,\n  BarChartCreatedEvent,\n  BarDrawEvent,\n  BarChartEventsTypes\n} from './BarChart.types';\nimport type {\n  NormalizedSeries,\n  ResponsiveOptions,\n  AllSeriesTypes\n} from '../../core';\nimport {\n  isNumeric,\n  noop,\n  serialMap,\n  extend,\n  safeHasProperty,\n  each\n} from '../../utils';\nimport {\n  alphaNumerate,\n  normalizeData,\n  serialize,\n  getMetaData,\n  getHighLow,\n  createSvg,\n  createChartRect,\n  createGridBackground\n} from '../../core';\nimport { AutoScaleAxis, StepAxis, axisUnits } from '../../axes';\nimport { BaseChart } from '../BaseChart';\n\nfunction getSerialSums(series: NormalizedSeries[]) {\n  return serialMap(series, (...args) =>\n    Array.from(args).reduce<{ x: number; y: number }>(\n      (prev, curr) => {\n        return {\n          x: prev.x + (safeHasProperty(curr, 'x') ? curr.x : 0),\n          y: prev.y + (safeHasProperty(curr, 'y') ? curr.y : 0)\n        };\n      },\n      { x: 0, y: 0 }\n    )\n  );\n}\n\n/**\n * Default options in bar charts. Expand the code view to see a detailed list of options with comments.\n */\nconst defaultOptions = {\n  // Options for X-Axis\n  axisX: {\n    // The offset of the chart drawing area to the border of the container\n    offset: 30,\n    // 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.\n    position: 'end' as const,\n    // Allows you to correct label positioning on this axis by positive or negative x and y offset.\n    labelOffset: {\n      x: 0,\n      y: 0\n    },\n    // If labels should be shown or not\n    showLabel: true,\n    // If the axis grid should be drawn or not\n    showGrid: true,\n    // Interpolation function that allows you to intercept the value from the axis label\n    labelInterpolationFnc: noop,\n    // This value specifies the minimum width in pixel of the scale steps\n    scaleMinSpace: 30,\n    // Use only integer values (whole numbers) for the scale steps\n    onlyInteger: false\n  },\n  // Options for Y-Axis\n  axisY: {\n    // The offset of the chart drawing area to the border of the container\n    offset: 40,\n    // 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.\n    position: 'start' as const,\n    // Allows you to correct label positioning on this axis by positive or negative x and y offset.\n    labelOffset: {\n      x: 0,\n      y: 0\n    },\n    // If labels should be shown or not\n    showLabel: true,\n    // If the axis grid should be drawn or not\n    showGrid: true,\n    // Interpolation function that allows you to intercept the value from the axis label\n    labelInterpolationFnc: noop,\n    // This value specifies the minimum height in pixel of the scale steps\n    scaleMinSpace: 20,\n    // Use only integer values (whole numbers) for the scale steps\n    onlyInteger: false\n  },\n  // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')\n  width: undefined,\n  // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')\n  height: undefined,\n  // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n  high: undefined,\n  // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n  low: undefined,\n  // Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.\n  referenceValue: 0,\n  // 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}\n  chartPadding: {\n    top: 15,\n    right: 15,\n    bottom: 5,\n    left: 10\n  },\n  // Specify the distance in pixel of bars in a group\n  seriesBarDistance: 15,\n  // If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.\n  stackBars: false,\n  // If set to true this property will force the stacked bars to draw from the zero line.\n  // 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.\n  // If set to 'accumulate-relative' positive and negative values will be handled separately.\n  stackMode: 'accumulate' as const,\n  // 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.\n  horizontalBars: false,\n  // 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.\n  distributeSeries: false,\n  // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n  reverseData: false,\n  // If the bar chart should add a background fill to the .ct-grids group.\n  showGridBackground: false,\n  // Override the class names that get used to generate the SVG structure of the chart\n  classNames: {\n    chart: 'ct-chart-bar',\n    horizontalBars: 'ct-horizontal-bars',\n    label: 'ct-label',\n    labelGroup: 'ct-labels',\n    series: 'ct-series',\n    bar: 'ct-bar',\n    grid: 'ct-grid',\n    gridGroup: 'ct-grids',\n    gridBackground: 'ct-grid-background',\n    vertical: 'ct-vertical',\n    horizontal: 'ct-horizontal',\n    start: 'ct-start',\n    end: 'ct-end'\n  }\n};\n\nexport class BarChart extends BaseChart<BarChartEventsTypes> {\n  /**\n   * This method creates a new bar chart and returns API object that you can use for later changes.\n   * @param query A selector query string or directly a DOM element\n   * @param data The data object that needs to consist of a labels and a series array\n   * @param options The options object with options that override the default options. Check the examples for a detailed list.\n   * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n   * @return An object which exposes the API for the created chart\n   *\n   * @example\n   * ```ts\n   * // Create a simple bar chart\n   * const data = {\n   *   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n   *   series: [\n   *     [5, 2, 4, 2, 0]\n   *   ]\n   * };\n   *\n   * // 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.\n   * new BarChart('.ct-chart', data);\n   * ```\n   *\n   * @example\n   * ```ts\n   * // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10\n   * new BarChart('.ct-chart', {\n   *   labels: [1, 2, 3, 4, 5, 6, 7],\n   *   series: [\n   *     [1, 3, 2, -5, -3, 1, -6],\n   *     [-5, -2, -4, -1, 2, -3, 1]\n   *   ]\n   * }, {\n   *   seriesBarDistance: 12,\n   *   low: -10,\n   *   high: 10\n   * });\n   * ```\n   */\n  constructor(\n    query: string | Element | null,\n    protected override data: BarChartData,\n    options?: BarChartOptions,\n    responsiveOptions?: ResponsiveOptions<BarChartOptions>\n  ) {\n    super(\n      query,\n      data,\n      defaultOptions,\n      extend({}, defaultOptions, options),\n      responsiveOptions\n    );\n  }\n\n  /**\n   * Creates a new chart\n   */\n  createChart(options: BarChartOptionsWithDefaults) {\n    const { data } = this;\n    const normalizedData = normalizeData(\n      data,\n      options.reverseData,\n      options.horizontalBars ? 'x' : 'y',\n      true\n    );\n    // Create new svg element\n    const svg = createSvg(\n      this.container,\n      options.width,\n      options.height,\n      options.classNames.chart +\n        (options.horizontalBars ? ' ' + options.classNames.horizontalBars : ''),\n      options.viewBox\n    );\n    const highLow =\n      options.stackBars &&\n      options.stackMode !== true &&\n      normalizedData.series.length\n        ? // If stacked bars we need to calculate the high low from stacked values from each series\n          getHighLow(\n            [getSerialSums(normalizedData.series)],\n            options,\n            options.horizontalBars ? 'x' : 'y'\n          )\n        : getHighLow(\n            normalizedData.series,\n            options,\n            options.horizontalBars ? 'x' : 'y'\n          );\n\n    this.svg = svg;\n\n    // Drawing groups in correct order\n    const gridGroup = svg.elem('g').addClass(options.classNames.gridGroup);\n    const seriesGroup = svg.elem('g');\n    const labelGroup = svg.elem('g').addClass(options.classNames.labelGroup);\n\n    // Overrides of high / low from settings\n    if (typeof options.high === 'number') {\n      highLow.high = options.high;\n    }\n\n    if (typeof options.low === 'number') {\n      highLow.low = options.low;\n    }\n\n    const chartRect = createChartRect(svg, options);\n    let valueAxis: Axis;\n    const labelAxisTicks = // We need to set step count based on some options combinations\n      options.distributeSeries && options.stackBars\n        ? // If distributed series are enabled and bars need to be stacked, we'll only have one bar and therefore should\n          // use only the first label for the step axis\n          normalizedData.labels.slice(0, 1)\n        : // If distributed series are enabled but stacked bars aren't, we should use the series labels\n          // If we are drawing a regular bar chart with two dimensional series data, we just use the labels array\n          // as the bars are normalized\n          normalizedData.labels;\n    let labelAxis: Axis;\n    let axisX: Axis;\n    let axisY: Axis;\n\n    // Set labelAxis and valueAxis based on the horizontalBars setting. This setting will flip the axes if necessary.\n    if (options.horizontalBars) {\n      if (options.axisX.type === undefined) {\n        valueAxis = axisX = new AutoScaleAxis(\n          axisUnits.x,\n          normalizedData.series,\n          chartRect,\n          { ...options.axisX, highLow: highLow, referenceValue: 0 }\n        );\n      } else {\n        // eslint-disable-next-line new-cap\n        valueAxis = axisX = new options.axisX.type(\n          axisUnits.x,\n          normalizedData.series,\n          chartRect,\n          { ...options.axisX, highLow: highLow, referenceValue: 0 }\n        );\n      }\n\n      if (options.axisY.type === undefined) {\n        labelAxis = axisY = new StepAxis(\n          axisUnits.y,\n          normalizedData.series,\n          chartRect,\n          {\n            ticks: labelAxisTicks\n          }\n        );\n      } else {\n        // eslint-disable-next-line new-cap\n        labelAxis = axisY = new options.axisY.type(\n          axisUnits.y,\n          normalizedData.series,\n          chartRect,\n          options.axisY\n        );\n      }\n    } else {\n      if (options.axisX.type === undefined) {\n        labelAxis = axisX = new StepAxis(\n          axisUnits.x,\n          normalizedData.series,\n          chartRect,\n          {\n            ticks: labelAxisTicks\n          }\n        );\n      } else {\n        // eslint-disable-next-line new-cap\n        labelAxis = axisX = new options.axisX.type(\n          axisUnits.x,\n          normalizedData.series,\n          chartRect,\n          options.axisX\n        );\n      }\n\n      if (options.axisY.type === undefined) {\n        valueAxis = axisY = new AutoScaleAxis(\n          axisUnits.y,\n          normalizedData.series,\n          chartRect,\n          { ...options.axisY, highLow: highLow, referenceValue: 0 }\n        );\n      } else {\n        // eslint-disable-next-line new-cap\n        valueAxis = axisY = new options.axisY.type(\n          axisUnits.y,\n          normalizedData.series,\n          chartRect,\n          { ...options.axisY, highLow: highLow, referenceValue: 0 }\n        );\n      }\n    }\n\n    // Projected 0 point\n    const zeroPoint = options.horizontalBars\n      ? chartRect.x1 + valueAxis.projectValue(0)\n      : chartRect.y1 - valueAxis.projectValue(0);\n    const isAccumulateStackMode = options.stackMode === 'accumulate';\n    const isAccumulateRelativeStackMode =\n      options.stackMode === 'accumulate-relative';\n    // Used to track the screen coordinates of stacked bars\n    const posStackedBarValues: number[] = [];\n    const negStackedBarValues: number[] = [];\n    let stackedBarValues = posStackedBarValues;\n\n    labelAxis.createGridAndLabels(\n      gridGroup,\n      labelGroup,\n      options,\n      this.eventEmitter\n    );\n    valueAxis.createGridAndLabels(\n      gridGroup,\n      labelGroup,\n      options,\n      this.eventEmitter\n    );\n\n    if (options.showGridBackground) {\n      createGridBackground(\n        gridGroup,\n        chartRect,\n        options.classNames.gridBackground,\n        this.eventEmitter\n      );\n    }\n\n    // Draw the series\n    each<AllSeriesTypes[number]>(\n      data.series,\n      (series, seriesIndex) => {\n        // Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.\n        const biPol = seriesIndex - (data.series.length - 1) / 2;\n        // Half of the period width between vertical grid lines used to position bars\n        let periodHalfLength: number;\n\n        // We need to set periodHalfLength based on some options combinations\n        if (options.distributeSeries && !options.stackBars) {\n          // If distributed series are enabled but stacked bars aren't, we need to use the length of the normaizedData array\n          // which is the series count and divide by 2\n          periodHalfLength =\n            labelAxis.axisLength / normalizedData.series.length / 2;\n        } else if (options.distributeSeries && options.stackBars) {\n          // If distributed series and stacked bars are enabled we'll only get one bar so we should just divide the axis\n          // length by 2\n          periodHalfLength = labelAxis.axisLength / 2;\n        } else {\n          // On regular bar charts we should just use the series length\n          periodHalfLength =\n            labelAxis.axisLength /\n            normalizedData.series[seriesIndex].length /\n            2;\n        }\n\n        // Adding the series group to the series element\n        const seriesElement = seriesGroup.elem('g');\n        const seriesName = safeHasProperty(series, 'name') && series.name;\n        const seriesClassName =\n          safeHasProperty(series, 'className') && series.className;\n        const seriesMeta = safeHasProperty(series, 'meta')\n          ? series.meta\n          : undefined;\n\n        // Write attributes to series group element. If series name or meta is undefined the attributes will not be written\n        if (seriesName) {\n          seriesElement.attr({\n            'ct:series-name': seriesName\n          });\n        }\n\n        if (seriesMeta) {\n          seriesElement.attr({\n            'ct:meta': serialize(seriesMeta)\n          });\n        }\n\n        // Use series class from series data or if not set generate one\n        seriesElement.addClass(\n          [\n            options.classNames.series,\n            seriesClassName ||\n              `${options.classNames.series}-${alphaNumerate(seriesIndex)}`\n          ].join(' ')\n        );\n\n        normalizedData.series[seriesIndex].forEach((value, valueIndex) => {\n          const valueX = safeHasProperty(value, 'x') && value.x;\n          const valueY = safeHasProperty(value, 'y') && value.y;\n          let labelAxisValueIndex;\n          // We need to set labelAxisValueIndex based on some options combinations\n          if (options.distributeSeries && !options.stackBars) {\n            // If distributed series are enabled but stacked bars aren't, we can use the seriesIndex for later projection\n            // on the step axis for label positioning\n            labelAxisValueIndex = seriesIndex;\n          } else if (options.distributeSeries && options.stackBars) {\n            // If distributed series and stacked bars are enabled, we will only get one bar and therefore always use\n            // 0 for projection on the label step axis\n            labelAxisValueIndex = 0;\n          } else {\n            // On regular bar charts we just use the value index to project on the label step axis\n            labelAxisValueIndex = valueIndex;\n          }\n\n          let projected;\n          // We need to transform coordinates differently based on the chart layout\n          if (options.horizontalBars) {\n            projected = {\n              x:\n                chartRect.x1 +\n                valueAxis.projectValue(\n                  valueX || 0,\n                  valueIndex,\n                  normalizedData.series[seriesIndex]\n                ),\n              y:\n                chartRect.y1 -\n                labelAxis.projectValue(\n                  valueY || 0,\n                  labelAxisValueIndex,\n                  normalizedData.series[seriesIndex]\n                )\n            };\n          } else {\n            projected = {\n              x:\n                chartRect.x1 +\n                labelAxis.projectValue(\n                  valueX || 0,\n                  labelAxisValueIndex,\n                  normalizedData.series[seriesIndex]\n                ),\n              y:\n                chartRect.y1 -\n                valueAxis.projectValue(\n                  valueY || 0,\n                  valueIndex,\n                  normalizedData.series[seriesIndex]\n                )\n            };\n          }\n\n          // If the label axis is a step based axis we will offset the bar into the middle of between two steps using\n          // the periodHalfLength value. Also we do arrange the different series so that they align up to each other using\n          // the seriesBarDistance. If we don't have a step axis, the bar positions can be chosen freely so we should not\n          // add any automated positioning.\n          if (labelAxis instanceof StepAxis) {\n            // Offset to center bar between grid lines, but only if the step axis is not stretched\n            if (!labelAxis.stretch) {\n              projected[labelAxis.units.pos] +=\n                periodHalfLength * (options.horizontalBars ? -1 : 1);\n            }\n            // Using bi-polar offset for multiple series if no stacked bars or series distribution is used\n            projected[labelAxis.units.pos] +=\n              options.stackBars || options.distributeSeries\n                ? 0\n                : biPol *\n                  options.seriesBarDistance *\n                  (options.horizontalBars ? -1 : 1);\n          }\n\n          // distinguish between positive and negative values in relative stack mode\n          if (isAccumulateRelativeStackMode) {\n            stackedBarValues =\n              valueY >= 0 || valueX >= 0\n                ? posStackedBarValues\n                : negStackedBarValues;\n          }\n\n          // Enter value in stacked bar values used to remember previous screen value for stacking up bars\n          const previousStack = stackedBarValues[valueIndex] || zeroPoint;\n          stackedBarValues[valueIndex] =\n            previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);\n\n          // Skip if value is undefined\n          if (value === undefined) {\n            return;\n          }\n\n          const positions = {\n            [`${labelAxis.units.pos}1`]: projected[labelAxis.units.pos],\n            [`${labelAxis.units.pos}2`]: projected[labelAxis.units.pos]\n          } as Record<'x1' | 'y1' | 'x2' | 'y2', number>;\n\n          if (\n            options.stackBars &&\n            (isAccumulateStackMode ||\n              isAccumulateRelativeStackMode ||\n              !options.stackMode)\n          ) {\n            // Stack mode: accumulate (default)\n            // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line\n            // We want backwards compatibility, so the expected fallback without the 'stackMode' option\n            // to be the original behaviour (accumulate)\n            positions[`${labelAxis.counterUnits.pos}1`] = previousStack;\n            positions[`${labelAxis.counterUnits.pos}2`] =\n              stackedBarValues[valueIndex];\n          } else {\n            // Draw from the zero line normally\n            // This is also the same code for Stack mode: overlap\n            positions[`${labelAxis.counterUnits.pos}1`] = zeroPoint;\n            positions[`${labelAxis.counterUnits.pos}2`] =\n              projected[labelAxis.counterUnits.pos];\n          }\n\n          // Limit x and y so that they are within the chart rect\n          positions.x1 = Math.min(\n            Math.max(positions.x1, chartRect.x1),\n            chartRect.x2\n          );\n          positions.x2 = Math.min(\n            Math.max(positions.x2, chartRect.x1),\n            chartRect.x2\n          );\n          positions.y1 = Math.min(\n            Math.max(positions.y1, chartRect.y2),\n            chartRect.y1\n          );\n          positions.y2 = Math.min(\n            Math.max(positions.y2, chartRect.y2),\n            chartRect.y1\n          );\n\n          const metaData = getMetaData(series, valueIndex);\n\n          // Create bar element\n          const bar = seriesElement\n            .elem('line', positions, options.classNames.bar)\n            .attr({\n              'ct:value': [valueX, valueY].filter(isNumeric).join(','),\n              'ct:meta': serialize(metaData)\n            });\n\n          this.eventEmitter.emit<BarDrawEvent>('draw', {\n            type: 'bar',\n            value,\n            index: valueIndex,\n            meta: metaData,\n            series,\n            seriesIndex,\n            axisX,\n            axisY,\n            chartRect,\n            group: seriesElement,\n            element: bar,\n            ...positions\n          });\n        });\n      },\n      options.reverseData\n    );\n\n    this.eventEmitter.emit<BarChartCreatedEvent>('created', {\n      chartRect,\n      axisX,\n      axisY,\n      svg,\n      options\n    });\n  }\n}\n"
  },
  {
    "path": "src/charts/BarChart/BarChart.types.ts",
    "content": "import type {\n  Options,\n  AxisOptions,\n  Data,\n  CreatedEvent,\n  DrawEvent,\n  NormalizedMulti,\n  AxesDrawEvent\n} from '../../core';\nimport type { RequiredKeys } from '../../utils';\nimport type { BaseChartEventsTypes } from '../types';\n\nexport type BarChartData = Data;\n\nexport interface BarChartOptions<\n  TXAxisOptions = AxisOptions,\n  TYAxisOptions = TXAxisOptions\n> extends Options<TXAxisOptions, TYAxisOptions> {\n  /**\n   * Override the class names that get used to generate the SVG structure of the chart\n   */\n  classNames?: {\n    chart?: string;\n    horizontalBars?: string;\n    label?: string;\n    labelGroup?: string;\n    series?: string;\n    bar?: string;\n    grid?: string;\n    gridGroup?: string;\n    gridBackground?: string;\n    vertical?: string;\n    horizontal?: string;\n    start?: string;\n    end?: string;\n  };\n  /**\n   * Specify the distance in pixel of bars in a group\n   */\n  seriesBarDistance?: number;\n  /**\n   * If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.\n   */\n  stackBars?: boolean;\n  /**\n   * If set to true this property will force the stacked bars to draw from the zero line.\n   * 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.\n   * If set to 'accumulate-relative' positive and negative values will be handled separately.\n   */\n  stackMode?: 'accumulate' | 'accumulate-relative' | boolean;\n  /**\n   * 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.\n   */\n  horizontalBars?: boolean;\n  /**\n   * 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.\n   */\n  distributeSeries?: boolean;\n  /**\n   * If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n   */\n  reverseData?: boolean;\n  /**\n   * If the bar chart should add a background fill to the .ct-grids group.\n   */\n  showGridBackground?: boolean;\n}\n\nexport type BarChartOptionsWithDefaults = RequiredKeys<\n  BarChartOptions<\n    RequiredKeys<\n      AxisOptions,\n      | 'offset'\n      | 'position'\n      | 'labelOffset'\n      | 'showLabel'\n      | 'showGrid'\n      | 'labelInterpolationFnc'\n      | 'scaleMinSpace'\n    >,\n    RequiredKeys<\n      AxisOptions,\n      | 'offset'\n      | 'position'\n      | 'labelOffset'\n      | 'showLabel'\n      | 'showGrid'\n      | 'labelInterpolationFnc'\n      | 'scaleMinSpace'\n    >\n  >,\n  | 'referenceValue'\n  | 'chartPadding'\n  | 'seriesBarDistance'\n  | 'stackMode'\n  | 'axisX'\n  | 'axisY',\n  'classNames'\n>;\n\nexport type BarChartCreatedEvent = CreatedEvent<BarChartOptions>;\n\nexport interface BarDrawEvent extends DrawEvent {\n  type: 'bar';\n  value: number | NormalizedMulti;\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n}\n\nexport type BarChartEventsTypes = BaseChartEventsTypes<\n  BarChartCreatedEvent,\n  AxesDrawEvent | BarDrawEvent\n>;\n"
  },
  {
    "path": "src/charts/BarChart/index.ts",
    "content": "export * from './BarChart';\nexport * from './BarChart.types';\n"
  },
  {
    "path": "src/charts/BaseChart.ts",
    "content": "import type { Data, Options, DataEvent, ResponsiveOptions } from '../core';\nimport type { Svg } from '../svg';\nimport type { BaseChartEventsTypes } from './types';\nimport { OptionsProvider, optionsProvider } from '../core';\nimport { extend } from '../utils';\nimport { EventListener, AllEventsListener, EventEmitter } from '../event';\n\nconst instances = new WeakMap<Element, BaseChart<unknown>>();\n\nexport abstract class BaseChart<TEventsTypes = BaseChartEventsTypes> {\n  protected svg?: Svg;\n  protected readonly container: Element;\n  protected readonly eventEmitter = new EventEmitter();\n  private readonly resizeListener = () => this.update();\n  // Using event loop for first draw to make it possible to register event listeners in the same call stack where\n  // the chart was created.\n  private initializeTimeoutId: NodeJS.Timer | null = setTimeout(\n    () => this.initialize(),\n    0\n  );\n  private optionsProvider?: OptionsProvider<Options>;\n\n  constructor(\n    query: string | Element | null,\n    protected data: Data,\n    private readonly defaultOptions: Options,\n    private options: Options,\n    private readonly responsiveOptions?: ResponsiveOptions<Options>\n  ) {\n    const container =\n      typeof query === 'string' ? document.querySelector(query) : query;\n\n    if (!container) {\n      throw new Error(\n        `Target element ${\n          typeof query === 'string' ? `\"${query}\"` : ''\n        } is not found`\n      );\n    }\n\n    this.container = container;\n\n    const prevInstance = instances.get(container);\n\n    // If chartist was already initialized in this container we are detaching all event listeners first\n    if (prevInstance) {\n      prevInstance.detach();\n    }\n\n    instances.set(container, this);\n  }\n\n  abstract createChart(options: Options): void;\n\n  // TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.\n  // This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not\n  // work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.\n  // See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html\n  // Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj\n  // The problem is with the label offsets that can't be converted into percentage and affecting the chart container\n  /**\n   * Updates the chart which currently does a full reconstruction of the SVG DOM\n   * @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.\n   * @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.\n   * @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\n   */\n  update(data?: Data, options?: Options, override = false) {\n    if (data) {\n      this.data = data || {};\n      this.data.labels = this.data.labels || [];\n      this.data.series = this.data.series || [];\n      // Event for data transformation that allows to manipulate the data before it gets rendered in the charts\n      this.eventEmitter.emit<DataEvent>('data', {\n        type: 'update',\n        data: this.data\n      });\n    }\n\n    if (options) {\n      this.options = extend(\n        {},\n        override ? this.options : this.defaultOptions,\n        options\n      );\n\n      // If chartist was not initialized yet, we just set the options and leave the rest to the initialization\n      // Otherwise we re-create the optionsProvider at this point\n      if (!this.initializeTimeoutId) {\n        this.optionsProvider?.removeMediaQueryListeners();\n        this.optionsProvider = optionsProvider(\n          this.options,\n          this.responsiveOptions,\n          this.eventEmitter\n        );\n      }\n    }\n\n    // Only re-created the chart if it has been initialized yet\n    if (!this.initializeTimeoutId && this.optionsProvider) {\n      this.createChart(this.optionsProvider.getCurrentOptions());\n    }\n\n    // Return a reference to the chart object to chain up calls\n    return this;\n  }\n\n  /**\n   * 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.\n   */\n  detach() {\n    // Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore\n    // the initializationTimeoutId is still a valid timeout reference, we will clear the timeout\n    if (!this.initializeTimeoutId) {\n      window.removeEventListener('resize', this.resizeListener);\n      this.optionsProvider?.removeMediaQueryListeners();\n    } else {\n      window.clearTimeout(this.initializeTimeoutId);\n    }\n\n    instances.delete(this.container);\n\n    return this;\n  }\n\n  /**\n   * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.\n   * @param event Name of the event. Check the examples for supported events.\n   * @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.\n   */\n  on<T extends keyof TEventsTypes>(\n    event: T,\n    listener: EventListener<TEventsTypes[T]>\n  ): this;\n  on(event: '*', listener: AllEventsListener): this;\n  on(event: string, listener: EventListener): this;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  on(event: string, listener: any) {\n    this.eventEmitter.on(event, listener);\n    return this;\n  }\n\n  /**\n   * 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.\n   * @param event Name of the event for which a handler should be removed\n   * @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.\n   */\n  off<T extends keyof TEventsTypes>(\n    event: T,\n    listener?: EventListener<TEventsTypes[T]>\n  ): this;\n  off(event: '*', listener?: AllEventsListener): this;\n  off(event: string, listener?: EventListener): this;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  off(event: string, listener?: any) {\n    this.eventEmitter.off(event, listener);\n    return this;\n  }\n\n  initialize() {\n    // Add window resize listener that re-creates the chart\n    window.addEventListener('resize', this.resizeListener);\n\n    // Obtain current options based on matching media queries (if responsive options are given)\n    // This will also register a listener that is re-creating the chart based on media changes\n    this.optionsProvider = optionsProvider(\n      this.options,\n      this.responsiveOptions,\n      this.eventEmitter\n    );\n    // Register options change listener that will trigger a chart update\n    this.eventEmitter.on('optionsChanged', () => this.update());\n\n    // Before the first chart creation we need to register us with all plugins that are configured\n    // Initialize all relevant plugins with our chart object and the plugin options specified in the config\n    if (this.options.plugins) {\n      this.options.plugins.forEach(plugin => {\n        if (Array.isArray(plugin)) {\n          plugin[0](this, plugin[1]);\n        } else {\n          plugin(this);\n        }\n      });\n    }\n\n    // Event for data transformation that allows to manipulate the data before it gets rendered in the charts\n    this.eventEmitter.emit<DataEvent>('data', {\n      type: 'initial',\n      data: this.data\n    });\n\n    // Create the first chart\n    this.createChart(this.optionsProvider.getCurrentOptions());\n\n    // As chart is initialized from the event loop now we can reset our timeout reference\n    // This is important if the chart gets initialized on the same element twice\n    this.initializeTimeoutId = null;\n  }\n}\n"
  },
  {
    "path": "src/charts/LineChart/LineChart.spec.ts",
    "content": "import { AutoScaleAxis, FixedScaleAxis } from '../../axes';\nimport { LineChartOptions, LineChartData, LineChart } from '.';\nimport * as Interpolation from '../../interpolation';\nimport { namespaces, deserialize } from '../../core';\nimport {\n  Fixture,\n  addMockWrapper,\n  destroyMockDom,\n  mockDom,\n  mockDomRects,\n  destroyMockDomRects\n} from '../../../test/mock/dom';\n\ndescribe('Charts', () => {\n  describe('LineChart', () => {\n    let fixture: Fixture;\n    let chart: LineChart;\n    let options: LineChartOptions;\n    let data: LineChartData;\n\n    function createChart() {\n      return new Promise<void>(resolve => {\n        fixture = addMockWrapper(\n          '<div class=\"ct-chart ct-golden-section\"></div>'\n        );\n        const { wrapper } = fixture;\n        chart = new LineChart(\n          wrapper.querySelector('.ct-chart'),\n          data,\n          options\n        ).on('created', () => {\n          resolve();\n          chart.off('created');\n        });\n      });\n    }\n\n    beforeEach(() => {\n      mockDom();\n      mockDomRects();\n    });\n    afterEach(() => {\n      destroyMockDom();\n      destroyMockDomRects();\n      data = { series: [] };\n      options = {};\n    });\n\n    describe('grids', () => {\n      beforeEach(() => {\n        data = {\n          series: [\n            [\n              { x: 1, y: 1 },\n              { x: 3, y: 5 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: AutoScaleAxis,\n            onlyInteger: true\n          },\n          axisY: {\n            type: AutoScaleAxis,\n            onlyInteger: true\n          }\n        };\n      });\n\n      it('should contain ct-grids group', async () => {\n        await createChart();\n\n        expect(fixture.wrapper.querySelectorAll('.ct-grids').length).toBe(1);\n      });\n\n      it('should draw grid lines', async () => {\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-horizontal')\n            .length\n        ).toBe(3);\n        expect(\n          fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-vertical')\n            .length\n        ).toBe(5);\n      });\n\n      it('should draw grid background', async () => {\n        options.showGridBackground = true;\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background')\n            .length\n        ).toBe(1);\n      });\n\n      it('should not draw grid background if option set to false', async () => {\n        options.showGridBackground = false;\n        await createChart();\n\n        expect(\n          fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background')\n            .length\n        ).toBe(0);\n      });\n    });\n\n    describe('AxisY position tests', () => {\n      beforeEach(() => {\n        data = {\n          series: [\n            [\n              { x: 1, y: 1 },\n              { x: 3, y: 5 }\n            ]\n          ]\n        };\n        options = {};\n      });\n\n      it('should have ct-start class if position start', async () => {\n        options = {\n          axisY: {\n            position: 'start'\n          }\n        };\n        await createChart();\n\n        Array.from(\n          fixture.wrapper.querySelectorAll('.ct-label.ct-vertical')\n        ).forEach(element =>\n          expect(element).toHaveAttribute(\n            'class',\n            'ct-label ct-vertical ct-start'\n          )\n        );\n      });\n\n      it('should have ct-end class if position is any other value than start', async () => {\n        options = {\n          axisY: {\n            position: 'end' as const\n          }\n        };\n        await createChart();\n\n        Array.from(\n          fixture.wrapper.querySelectorAll('.ct-label.ct-vertical')\n        ).forEach(element =>\n          expect(element).toHaveAttribute(\n            'class',\n            'ct-label ct-vertical ct-end'\n          )\n        );\n      });\n    });\n\n    describe('ct:value attribute', () => {\n      it('should contain x and y value for each datapoint', async () => {\n        data = {\n          series: [\n            [\n              { x: 1, y: 2 },\n              { x: 3, y: 4 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: FixedScaleAxis\n          }\n        };\n        await createChart();\n\n        const points = fixture.wrapper.querySelectorAll('.ct-point');\n        expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('1,2');\n        expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('3,4');\n      });\n\n      it('should render values that are zero', async () => {\n        data = {\n          series: [\n            [\n              { x: 0, y: 1 },\n              { x: 1, y: 0 },\n              { x: 0, y: 0 }\n            ]\n          ]\n        };\n        options = {\n          axisX: {\n            type: FixedScaleAxis\n          }\n        };\n        await createChart();\n\n        const points = fixture.wrapper.querySelectorAll('.ct-point');\n        expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('0,1');\n        expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('1,0');\n        expect(points[2].getAttributeNS(namespaces.ct, 'value')).toBe('0,0');\n      });\n    });\n\n    describe('Meta data tests', () => {\n      it('should render meta data correctly with mixed value array', async () => {\n        const meta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: meta\n              },\n              0\n            ]\n          ]\n        };\n        await createChart();\n\n        const points = fixture.wrapper.querySelectorAll('.ct-point');\n        expect(\n          deserialize(points[3].getAttributeNS(namespaces.ct, 'meta'))\n        ).toEqual(meta);\n      });\n\n      it('should render meta data correctly with mixed value array and different normalized data length', async () => {\n        const meta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: meta\n              },\n              0\n            ]\n          ]\n        };\n        await createChart();\n\n        const points = fixture.wrapper.querySelectorAll('.ct-point');\n        expect(\n          deserialize(points[3].getAttributeNS(namespaces.ct, 'meta'))\n        ).toEqual(meta);\n      });\n\n      it('should render meta data correctly with mixed value array and mixed series notation', async () => {\n        const seriesMeta = 9999;\n        const valueMeta = {\n          test: 'Serialized Test'\n        };\n\n        data = {\n          labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n          series: [\n            [\n              5,\n              2,\n              4,\n              {\n                value: 2,\n                meta: valueMeta\n              },\n              0\n            ],\n            {\n              meta: seriesMeta,\n              data: [\n                5,\n                2,\n                {\n                  value: 2,\n                  meta: valueMeta\n                },\n                0\n              ]\n            }\n          ]\n        };\n        await createChart();\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelectorAll('.ct-series-a .ct-point')[3]\n              .getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(valueMeta);\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelector('.ct-series-b')\n              ?.getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(seriesMeta);\n\n        expect(\n          deserialize(\n            fixture.wrapper\n              .querySelectorAll('.ct-series-b .ct-point')[2]\n              .getAttributeNS(namespaces.ct, 'meta')\n          )\n        ).toEqual(valueMeta);\n      });\n    });\n\n    describe('Line charts with holes', () => {\n      it('should render correctly with Interpolation.none and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: false\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n\n      it('should render correctly with Interpolation.cardinal and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: true\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              // Cardinal should create Line path segment if only one connection\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              // Cardinal should create Curve path segment for 2 or more connections\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n\n      it('should render correctly with Interpolation.monotoneCubic and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: Interpolation.monotoneCubic()\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              // Monotone cubic should create Line path segment if only one connection\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              // Monotone cubic should create Curve path segment for 2 or more connections\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n\n      it('should render correctly with Interpolation.simple and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: Interpolation.simple()\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'C',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n\n      it('should render correctly with postponed Interpolation.step and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: Interpolation.step()\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n\n      it('should render correctly with preponed Interpolation.step and holes everywhere', async () => {\n        data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            [\n              NaN,\n              15,\n              0,\n              null,\n              2,\n              3,\n              4,\n              undefined,\n              { value: 1, meta: 'meta data' },\n              null\n            ]\n          ]\n        };\n        options = {\n          lineSmooth: Interpolation.step({\n            postpone: false\n          })\n        };\n\n        await createChart();\n\n        chart.on('draw', context => {\n          if (context.type === 'line') {\n            expect(\n              context.path.pathElements.map(pathElement => {\n                return {\n                  command: pathElement.command,\n                  data: pathElement.data\n                };\n              })\n            ).toEqual([\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 1,\n                  value: { x: undefined, y: 15 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 2,\n                  value: { x: undefined, y: 0 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 4,\n                  value: { x: undefined, y: 2 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 5,\n                  value: { x: undefined, y: 3 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'L',\n                data: {\n                  valueIndex: 6,\n                  value: { x: undefined, y: 4 },\n                  meta: undefined\n                }\n              },\n              {\n                command: 'M',\n                data: {\n                  valueIndex: 8,\n                  value: { x: undefined, y: 1 },\n                  meta: 'meta data'\n                }\n              }\n            ]);\n          }\n        });\n      });\n    });\n\n    describe('Single value data tests', () => {\n      beforeEach(() => {\n        data = {\n          labels: [1],\n          series: [[1]]\n        };\n      });\n\n      it('should render without NaN values and points', async () => {\n        await createChart();\n\n        expect(document.querySelector('.ct-line')).toHaveAttribute(\n          'd',\n          'M50,15'\n        );\n        expect(document.querySelector('.ct-point')).toHaveAttribute('x1', '50');\n        expect(document.querySelector('.ct-point')).toHaveAttribute(\n          'x2',\n          '50.01'\n        );\n      });\n    });\n\n    describe('Empty data tests', () => {\n      it('should render empty grid with no data', async () => {\n        await createChart();\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n\n      it('should render empty grid with only labels', async () => {\n        data = {\n          labels: [1, 2, 3, 4],\n          series: []\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n        // Find exactly as many horizontal grid lines as labels were specified (Step Axis)\n        expect(\n          document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length\n        ).toBe(data.labels?.length);\n      });\n\n      it('should generate labels and render empty grid with only series in data', async () => {\n        data = {\n          series: [\n            [1, 2, 3, 4],\n            [2, 3, 4],\n            [3, 4]\n          ]\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n        // Should generate the labels using the largest series count\n        expect(\n          document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length\n        ).toBe(\n          Math.max(\n            ...data.series.map(series =>\n              Array.isArray(series) ? series.length : 0\n            )\n          )\n        );\n      });\n\n      it('should render empty grid with no data and specified high low', async () => {\n        data = { series: [] };\n        options = {\n          width: 400,\n          height: 300,\n          high: 100,\n          low: -100\n        };\n        await createChart();\n\n        // Find first and last label\n        const labels = document.querySelectorAll(\n          '.ct-labels .ct-label.ct-vertical'\n        );\n        const firstLabel = labels[0];\n        const lastLabel = labels[labels.length - 1];\n\n        expect(firstLabel.textContent?.trim()).toBe('-100');\n        expect(lastLabel.textContent?.trim()).toBe('100');\n      });\n\n      it('should render empty grid with no data and reverseData option', async () => {\n        data = { series: [] };\n        options = {\n          reverseData: true\n        };\n        await createChart();\n\n        // Find at least one vertical grid line\n        expect(\n          document.querySelector('.ct-grids .ct-grid.ct-vertical')\n        ).toBeDefined();\n      });\n    });\n\n    describe('x1 and x2 attribute', () => {\n      it('should contain just a datapoint', async () => {\n        data = {\n          series: [[{ x: 1, y: 2 }]]\n        };\n        options = {\n          fullWidth: true\n        };\n        await createChart();\n\n        expect(\n          document.querySelector('.ct-point')?.getAttribute('x1')\n        ).not.toBe('NaN');\n        expect(\n          document.querySelector('.ct-point')?.getAttribute('x2')\n        ).not.toBe('NaN');\n      });\n    });\n\n    it('should correct apply class names', async () => {\n      data = {\n        labels: ['A', 'B', 'C'],\n        series: [\n          {\n            className: 'series-1',\n            data: [1, 2, 3]\n          },\n          {\n            className: 'series-2',\n            data: [4, 5, 6]\n          }\n        ]\n      };\n      options = {\n        reverseData: true\n      };\n      await createChart();\n\n      const seriesElements = document.querySelectorAll('.ct-series');\n\n      expect(seriesElements[0]).toHaveClass('series-2');\n      expect(seriesElements[0]).toContainHTML('ct:value=\"6\"');\n\n      expect(seriesElements[1]).toHaveClass('series-1');\n      expect(seriesElements[1]).toContainHTML('ct:value=\"3\"');\n    });\n  });\n});\n"
  },
  {
    "path": "src/charts/LineChart/LineChart.stories.ts",
    "content": "import 'chartist-dev/styles';\nimport faker from 'faker';\nimport {\n  LineChart,\n  AutoScaleAxis,\n  Interpolation,\n  Svg,\n  easings\n} from 'chartist-dev';\n\nexport default {\n  title: 'LineChart',\n  argTypes: {}\n};\n\nexport function Default() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n      series: [\n        [12, 9, 7, 8, 5],\n        [2, 1, 3.5, 7, 3],\n        [1, 3, 4, 5, 6]\n      ]\n    },\n    {\n      fullWidth: true,\n      chartPadding: {\n        right: 40\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function AutoScale() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      series: [\n        [\n          { x: 1, y: 1 },\n          { x: 3, y: 5 }\n        ]\n      ]\n    },\n    {\n      axisX: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      },\n      axisY: {\n        type: AutoScaleAxis,\n        onlyInteger: true\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function Labels() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],\n      series: [[5, 2, 4, 2, 0]]\n    },\n    {}\n  );\n\n  return root;\n}\n\nexport function MultiSeries() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      series: [\n        [5, 2, 4, 2, 0],\n        [5, 2, 2, 0]\n      ]\n    },\n    {}\n  );\n\n  return root;\n}\n\nexport function Holes() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],\n      series: [\n        [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],\n        [\n          10,\n          15,\n          null,\n          12,\n          null,\n          10,\n          12,\n          15,\n          null,\n          null,\n          12,\n          null,\n          14,\n          null,\n          null,\n          null\n        ],\n        [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],\n        [\n          { x: 3, y: 3 },\n          { x: 4, y: 3 },\n          { x: 5, y: undefined },\n          { x: 6, y: 4 },\n          { x: 7, y: null },\n          { x: 8, y: 4 },\n          { x: 9, y: 4 }\n        ]\n      ]\n    },\n    {\n      fullWidth: true,\n      chartPadding: {\n        right: 10\n      },\n      low: 0\n    }\n  );\n\n  return root;\n}\n\nexport function FilledHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],\n      series: [\n        [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],\n        [\n          10,\n          15,\n          null,\n          12,\n          null,\n          10,\n          12,\n          15,\n          null,\n          null,\n          12,\n          null,\n          14,\n          null,\n          null,\n          null\n        ],\n        [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],\n        [\n          { x: 3, y: 3 },\n          { x: 4, y: 3 },\n          { x: 5, y: undefined },\n          { x: 6, y: 4 },\n          { x: 7, y: null },\n          { x: 8, y: 4 },\n          { x: 9, y: 4 }\n        ]\n      ]\n    },\n    {\n      fullWidth: true,\n      chartPadding: {\n        right: 10\n      },\n      lineSmooth: Interpolation.cardinal({\n        fillHoles: true\n      }),\n      low: 0\n    }\n  );\n\n  return root;\n}\n\nexport function OnlyWholeNumbers() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8],\n      series: [\n        [1, 2, 3, 1, -2, 0, 1, 0],\n        [-2, -1, -2, -1, -3, -1, -2, -1],\n        [0, 0, 0, 1, 2, 3, 2, 1],\n        [3, 2, 1, 0.5, 1, 0, -1, -3]\n      ]\n    },\n    {\n      high: 3,\n      low: -3,\n      fullWidth: true,\n      // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis\n      axisY: {\n        onlyInteger: true,\n        offset: 20\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function NoInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: false\n    }\n  );\n\n  return root;\n}\n\nexport function CardinalInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: true\n    }\n  );\n\n  return root;\n}\n\nexport function MonotoneCubicInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: Interpolation.monotoneCubic()\n    }\n  );\n\n  return root;\n}\n\nexport function SimpleInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: Interpolation.simple()\n    }\n  );\n\n  return root;\n}\n\nexport function StepInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: Interpolation.step()\n    }\n  );\n\n  return root;\n}\n\nexport function StepNoPostponeInterpolationWithHoles() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n      series: [[NaN, 15, 0, null, 2, 3, 4, undefined, 1, null]]\n    },\n    {\n      lineSmooth: Interpolation.step({\n        postpone: false\n      })\n    }\n  );\n\n  return root;\n}\n\nexport function SeriesOverrides() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['1', '2', '3', '4', '5', '6', '7', '8'],\n      // Naming the series with the series object array notation\n      series: [\n        {\n          name: 'series-1',\n          data: [5, 2, -4, 2, 0, -2, 5, -3]\n        },\n        {\n          name: 'series-2',\n          data: [4, 3, 5, 3, 1, 3, 6, 4]\n        },\n        {\n          name: 'series-3',\n          data: [2, 4, 3, 1, 4, 5, 3, 2]\n        }\n      ]\n    },\n    {\n      fullWidth: true,\n      // Within the series options you can use the series names\n      // to specify configuration that will only be used for the\n      // specific series.\n      series: {\n        'series-1': {\n          lineSmooth: Interpolation.step()\n        },\n        'series-2': {\n          lineSmooth: Interpolation.simple(),\n          showArea: true\n        },\n        'series-3': {\n          showPoint: false\n        }\n      }\n    },\n    [\n      // You can even use responsive configuration overrides to\n      // customize your series configuration even further!\n      [\n        'screen and (max-width: 320px)',\n        {\n          series: {\n            'series-1': {\n              lineSmooth: Interpolation.none()\n            },\n            'series-2': {\n              lineSmooth: Interpolation.none(),\n              showArea: false\n            },\n            'series-3': {\n              lineSmooth: Interpolation.none(),\n              showPoint: true\n            }\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n\nexport function ReverseData() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      series: [\n        [\n          { x: 1, y: 1 },\n          { x: 3, y: 5 }\n        ]\n      ]\n    },\n    {\n      reverseData: true\n    }\n  );\n\n  return root;\n}\n\nexport function FullWidth() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      series: [\n        [\n          { x: 1, y: 1 },\n          { x: 3, y: 5 }\n        ]\n      ]\n    },\n    {\n      fullWidth: true\n    }\n  );\n\n  return root;\n}\n\nexport function Scatter() {\n  const root = document.createElement('div');\n  const data = Array.from({ length: 52 }).reduce<{\n    labels: number[];\n    series: number[][];\n  }>(\n    (data, _, index) => {\n      data.labels.push(index + 1);\n      data.series.forEach(series => {\n        series.push(faker.datatype.number({ min: 0, max: 100 }));\n      });\n\n      return data;\n    },\n    {\n      labels: [],\n      series: Array.from({ length: 4 }, () => [])\n    }\n  );\n\n  new LineChart(\n    root,\n    data,\n    {\n      showLine: false,\n      axisX: {\n        labelInterpolationFnc(value, index) {\n          return index % 13 === 0 ? 'W' + value : null;\n        }\n      }\n    },\n    [\n      [\n        'screen and (min-width: 640px)',\n        {\n          axisX: {\n            labelInterpolationFnc(value, index) {\n              return index % 4 === 0 ? 'W' + value : null;\n            }\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n\nexport function Area() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8],\n      series: [[5, 9, 7, 8, 5, 3, 5, 4]]\n    },\n    {\n      low: 0,\n      showArea: true\n    }\n  );\n\n  return root;\n}\n\nexport function BiPolarArea() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: [1, 2, 3, 4, 5, 6, 7, 8],\n      series: [\n        [1, 2, 3, 1, -2, 0, 1, 0],\n        [-2, -1, -2, -1, -2.5, -1, -2, -1],\n        [0, 0, 0, 1, 2, 2.5, 2, 1],\n        [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]\n      ]\n    },\n    {\n      high: 3,\n      low: -3,\n      showArea: true,\n      showLine: false,\n      showPoint: false,\n      fullWidth: true,\n      axisX: {\n        showLabel: false,\n        showGrid: false\n      }\n    }\n  );\n\n  return root;\n}\n\nexport function CustomPoints() {\n  const root = document.createElement('div');\n\n  new LineChart(root, {\n    labels: [1, 2, 3, 4, 5],\n    series: [[12, 9, 7, 8, 5]]\n  }).on('draw', data => {\n    // If the draw event was triggered from drawing a point on the line chart\n    if (data.type === 'point') {\n      // We are creating a new path SVG element that draws a triangle around the point coordinates\n      const triangle = new Svg(\n        'path',\n        {\n          d: [\n            'M',\n            data.x,\n            data.y - 15,\n            'L',\n            data.x - 15,\n            data.y + 8,\n            'L',\n            data.x + 15,\n            data.y + 8,\n            'z'\n          ].join(' '),\n          style: 'fill-opacity: 1'\n        },\n        'ct-area'\n      );\n\n      // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle\n      data.element.replace(triangle);\n    }\n  });\n\n  return root;\n}\n\nexport function PathAnimation() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n      series: [\n        [1, 5, 2, 5, 4, 3],\n        [2, 3, 4, 8, 1, 2],\n        [5, 4, 3, 2, 1, 0.5]\n      ]\n    },\n    {\n      low: 0,\n      showArea: true,\n      showPoint: false,\n      fullWidth: true\n    }\n  ).on('draw', data => {\n    if (\n      !process.env.STORYBOOK_STORYSHOTS &&\n      (data.type === 'line' || data.type === 'area')\n    ) {\n      data.element.animate({\n        d: {\n          begin: 2000 * data.index,\n          dur: 2000,\n          from: data.path\n            .clone()\n            .scale(1, 0)\n            .translate(0, data.chartRect.height())\n            .stringify(),\n          to: data.path.clone().stringify(),\n          easing: easings.easeOutQuint\n        }\n      });\n    }\n  });\n\n  return root;\n}\n\nexport function ViewBox() {\n  const root = document.createElement('div');\n\n  new LineChart(\n    root,\n    {\n      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n      series: [\n        [12, 9, 7, 8, 5],\n        [2, 1, 3.5, 7, 3],\n        [1, 3, 4, 5, 6]\n      ]\n    },\n    {\n      fullWidth: true,\n      chartPadding: {\n        right: 40\n      },\n      viewBox: {\n        width: 800,\n        height: 400\n      }\n    },\n    [\n      [\n        'screen and (max-width: 575px)',\n        {\n          viewBox: {\n            width: 400,\n            height: 300\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n"
  },
  {
    "path": "src/charts/LineChart/LineChart.ts",
    "content": "import type { Axis } from '../../axes';\nimport type {\n  LineChartData,\n  LineChartOptions,\n  LineChartOptionsWithDefaults,\n  LineChartCreatedEvent,\n  PointDrawEvent,\n  LineDrawEvent,\n  AreaDrawEvent,\n  LineChartEventsTypes\n} from './LineChart.types';\nimport type {\n  SegmentData,\n  Series,\n  SeriesObject,\n  ResponsiveOptions\n} from '../../core';\nimport {\n  alphaNumerate,\n  normalizeData,\n  serialize,\n  getMetaData,\n  createSvg,\n  createChartRect,\n  createGridBackground\n} from '../../core';\nimport { isNumeric, noop, extend, safeHasProperty, each } from '../../utils';\nimport { StepAxis, AutoScaleAxis, axisUnits } from '../../axes';\nimport { monotoneCubic, none } from '../../interpolation';\nimport { BaseChart } from './../BaseChart';\n\nexport function getSeriesOption<\n  T extends keyof Omit<LineChartOptionsWithDefaults, 'series'>\n>(\n  series: Series | SeriesObject,\n  options: LineChartOptionsWithDefaults,\n  key: T\n) {\n  if (\n    safeHasProperty(series, 'name') &&\n    series.name &&\n    options.series?.[series.name]\n  ) {\n    const seriesOptions = options?.series[series.name];\n    const value = seriesOptions[key];\n    const result = value === undefined ? options[key] : value;\n\n    return result as LineChartOptionsWithDefaults[T];\n  } else {\n    return options[key];\n  }\n}\n\n/**\n * Default options in line charts. Expand the code view to see a detailed list of options with comments.\n */\nconst defaultOptions = {\n  // Options for X-Axis\n  axisX: {\n    // The offset of the labels to the chart area\n    offset: 30,\n    // 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.\n    position: 'end' as const,\n    // Allows you to correct label positioning on this axis by positive or negative x and y offset.\n    labelOffset: {\n      x: 0,\n      y: 0\n    },\n    // If labels should be shown or not\n    showLabel: true,\n    // If the axis grid should be drawn or not\n    showGrid: true,\n    // Interpolation function that allows you to intercept the value from the axis label\n    labelInterpolationFnc: noop,\n    // 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.\n    type: undefined\n  },\n  // Options for Y-Axis\n  axisY: {\n    // The offset of the labels to the chart area\n    offset: 40,\n    // 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.\n    position: 'start' as const,\n    // Allows you to correct label positioning on this axis by positive or negative x and y offset.\n    labelOffset: {\n      x: 0,\n      y: 0\n    },\n    // If labels should be shown or not\n    showLabel: true,\n    // If the axis grid should be drawn or not\n    showGrid: true,\n    // Interpolation function that allows you to intercept the value from the axis label\n    labelInterpolationFnc: noop,\n    // 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.\n    type: undefined,\n    // This value specifies the minimum height in pixel of the scale steps\n    scaleMinSpace: 20,\n    // Use only integer values (whole numbers) for the scale steps\n    onlyInteger: false\n  },\n  // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')\n  width: undefined,\n  // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')\n  height: undefined,\n  // If the line should be drawn or not\n  showLine: true,\n  // If dots should be drawn or not\n  showPoint: true,\n  // If the line chart should draw an area\n  showArea: false,\n  // The base for the area chart that will be used to close the area shape (is normally 0)\n  areaBase: 0,\n  // 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.\n  lineSmooth: true,\n  // If the line chart should add a background fill to the .ct-grids group.\n  showGridBackground: false,\n  // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n  low: undefined,\n  // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n  high: undefined,\n  // 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}\n  chartPadding: {\n    top: 15,\n    right: 15,\n    bottom: 5,\n    left: 10\n  },\n  // 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.\n  fullWidth: false,\n  // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n  reverseData: false,\n  // Override the class names that get used to generate the SVG structure of the chart\n  classNames: {\n    chart: 'ct-chart-line',\n    label: 'ct-label',\n    labelGroup: 'ct-labels',\n    series: 'ct-series',\n    line: 'ct-line',\n    point: 'ct-point',\n    area: 'ct-area',\n    grid: 'ct-grid',\n    gridGroup: 'ct-grids',\n    gridBackground: 'ct-grid-background',\n    vertical: 'ct-vertical',\n    horizontal: 'ct-horizontal',\n    start: 'ct-start',\n    end: 'ct-end'\n  }\n};\n\nexport class LineChart extends BaseChart<LineChartEventsTypes> {\n  /**\n   * This method creates a new line chart.\n   * @param query A selector query string or directly a DOM element\n   * @param data The data object that needs to consist of a labels and a series array\n   * @param options The options object with options that override the default options. Check the examples for a detailed list.\n   * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n   * @return An object which exposes the API for the created chart\n   *\n   * @example\n   * ```ts\n   * // Create a simple line chart\n   * const data = {\n   *   // A labels array that can contain any sort of values\n   *   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n   *   // Our series array that contains series objects or in this case series data arrays\n   *   series: [\n   *     [5, 2, 4, 2, 0]\n   *   ]\n   * };\n   *\n   * // As options we currently only set a static size of 300x200 px\n   * const options = {\n   *   width: '300px',\n   *   height: '200px'\n   * };\n   *\n   * // 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\n   * new LineChart('.ct-chart', data, options);\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Use specific interpolation function with configuration from the Chartist.Interpolation module\n   *\n   * const chart = new LineChart('.ct-chart', {\n   *   labels: [1, 2, 3, 4, 5],\n   *   series: [\n   *     [1, 1, 8, 1, 7]\n   *   ]\n   * }, {\n   *   lineSmooth: Chartist.Interpolation.cardinal({\n   *     tension: 0.2\n   *   })\n   * });\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Create a line chart with responsive options\n   *\n   * const data = {\n   *   // A labels array that can contain any sort of values\n   *   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n   *   // Our series array that contains series objects or in this case series data arrays\n   *   series: [\n   *     [5, 2, 4, 2, 0]\n   *   ]\n   * };\n   *\n   * // In addition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.\n   * const responsiveOptions = [\n   *   ['screen and (min-width: 641px) and (max-width: 1024px)', {\n   *     showPoint: false,\n   *     axisX: {\n   *       labelInterpolationFnc: function(value) {\n   *         // Will return Mon, Tue, Wed etc. on medium screens\n   *         return value.slice(0, 3);\n   *       }\n   *     }\n   *   }],\n   *   ['screen and (max-width: 640px)', {\n   *     showLine: false,\n   *     axisX: {\n   *       labelInterpolationFnc: function(value) {\n   *         // Will return M, T, W etc. on small screens\n   *         return value[0];\n   *       }\n   *     }\n   *   }]\n   * ];\n   *\n   * new LineChart('.ct-chart', data, null, responsiveOptions);\n   * ```\n   */\n  constructor(\n    query: string | Element | null,\n    protected override data: LineChartData,\n    options?: LineChartOptions,\n    responsiveOptions?: ResponsiveOptions<LineChartOptions>\n  ) {\n    super(\n      query,\n      data,\n      defaultOptions,\n      extend({}, defaultOptions, options),\n      responsiveOptions\n    );\n  }\n\n  /**\n   * Creates a new chart\n   */\n  createChart(options: LineChartOptionsWithDefaults) {\n    const { data } = this;\n    const normalizedData = normalizeData(data, options.reverseData, true);\n\n    // Create new svg object\n    const svg = createSvg(\n      this.container,\n      options.width,\n      options.height,\n      options.classNames.chart,\n      options.viewBox\n    );\n\n    this.svg = svg;\n\n    // Create groups for labels, grid and series\n    const gridGroup = svg.elem('g').addClass(options.classNames.gridGroup);\n    const seriesGroup = svg.elem('g');\n    const labelGroup = svg.elem('g').addClass(options.classNames.labelGroup);\n\n    const chartRect = createChartRect(svg, options);\n    let axisX: Axis;\n    let axisY: Axis;\n\n    if (options.axisX.type === undefined) {\n      axisX = new StepAxis(axisUnits.x, normalizedData.series, chartRect, {\n        ...options.axisX,\n        ticks: normalizedData.labels,\n        stretch: options.fullWidth\n      });\n    } else {\n      // eslint-disable-next-line new-cap\n      axisX = new options.axisX.type(\n        axisUnits.x,\n        normalizedData.series,\n        chartRect,\n        options.axisX\n      );\n    }\n\n    if (options.axisY.type === undefined) {\n      axisY = new AutoScaleAxis(axisUnits.y, normalizedData.series, chartRect, {\n        ...options.axisY,\n        high: isNumeric(options.high) ? options.high : options.axisY.high,\n        low: isNumeric(options.low) ? options.low : options.axisY.low\n      });\n    } else {\n      // eslint-disable-next-line new-cap\n      axisY = new options.axisY.type(\n        axisUnits.y,\n        normalizedData.series,\n        chartRect,\n        options.axisY\n      );\n    }\n\n    axisX.createGridAndLabels(\n      gridGroup,\n      labelGroup,\n      options,\n      this.eventEmitter\n    );\n    axisY.createGridAndLabels(\n      gridGroup,\n      labelGroup,\n      options,\n      this.eventEmitter\n    );\n\n    if (options.showGridBackground) {\n      createGridBackground(\n        gridGroup,\n        chartRect,\n        options.classNames.gridBackground,\n        this.eventEmitter\n      );\n    }\n\n    // Draw the series\n    each(\n      data.series,\n      (series, seriesIndex) => {\n        const seriesElement = seriesGroup.elem('g');\n        const seriesName = safeHasProperty(series, 'name') && series.name;\n        const seriesClassName =\n          safeHasProperty(series, 'className') && series.className;\n        const seriesMeta = safeHasProperty(series, 'meta')\n          ? series.meta\n          : undefined;\n\n        // Write attributes to series group element. If series name or meta is undefined the attributes will not be written\n        if (seriesName) {\n          seriesElement.attr({\n            'ct:series-name': seriesName\n          });\n        }\n\n        if (seriesMeta) {\n          seriesElement.attr({\n            'ct:meta': serialize(seriesMeta)\n          });\n        }\n\n        // Use series class from series data or if not set generate one\n        seriesElement.addClass(\n          [\n            options.classNames.series,\n            seriesClassName ||\n              `${options.classNames.series}-${alphaNumerate(seriesIndex)}`\n          ].join(' ')\n        );\n\n        const pathCoordinates: number[] = [];\n        const pathData: SegmentData[] = [];\n\n        normalizedData.series[seriesIndex].forEach((value, valueIndex) => {\n          const p = {\n            x:\n              chartRect.x1 +\n              axisX.projectValue(\n                value,\n                valueIndex,\n                normalizedData.series[seriesIndex]\n              ),\n            y:\n              chartRect.y1 -\n              axisY.projectValue(\n                value,\n                valueIndex,\n                normalizedData.series[seriesIndex]\n              )\n          };\n          pathCoordinates.push(p.x, p.y);\n          pathData.push({\n            value,\n            valueIndex,\n            meta: getMetaData(series, valueIndex)\n          });\n        });\n\n        const seriesOptions = {\n          lineSmooth: getSeriesOption(series, options, 'lineSmooth'),\n          showPoint: getSeriesOption(series, options, 'showPoint'),\n          showLine: getSeriesOption(series, options, 'showLine'),\n          showArea: getSeriesOption(series, options, 'showArea'),\n          areaBase: getSeriesOption(series, options, 'areaBase')\n        };\n\n        let smoothing;\n        if (typeof seriesOptions.lineSmooth === 'function') {\n          smoothing = seriesOptions.lineSmooth;\n        } else {\n          smoothing = seriesOptions.lineSmooth ? monotoneCubic() : none();\n        }\n\n        // Interpolating path where pathData will be used to annotate each path element so we can trace back the original\n        // index, value and meta data\n        const path = smoothing(pathCoordinates, pathData);\n\n        // If we should show points we need to create them now to avoid secondary loop\n        // Points are drawn from the pathElements returned by the interpolation function\n        // Small offset for Firefox to render squares correctly\n        if (seriesOptions.showPoint) {\n          path.pathElements.forEach(pathElement => {\n            const { data: pathElementData } = pathElement;\n            const point = seriesElement.elem(\n              'line',\n              {\n                x1: pathElement.x,\n                y1: pathElement.y,\n                x2: pathElement.x + 0.01,\n                y2: pathElement.y\n              },\n              options.classNames.point\n            );\n\n            if (pathElementData) {\n              let x: number | undefined;\n              let y: number | undefined;\n\n              if (safeHasProperty(pathElementData.value, 'x')) {\n                x = pathElementData.value.x;\n              }\n\n              if (safeHasProperty(pathElementData.value, 'y')) {\n                y = pathElementData.value.y;\n              }\n\n              point.attr({\n                'ct:value': [x, y].filter(isNumeric).join(','),\n                'ct:meta': serialize(pathElementData.meta)\n              });\n            }\n\n            this.eventEmitter.emit<PointDrawEvent>('draw', {\n              type: 'point',\n              value: pathElementData?.value,\n              index: pathElementData?.valueIndex || 0,\n              meta: pathElementData?.meta,\n              series,\n              seriesIndex,\n              axisX,\n              axisY,\n              group: seriesElement,\n              element: point,\n              x: pathElement.x,\n              y: pathElement.y,\n              chartRect\n            });\n          });\n        }\n\n        if (seriesOptions.showLine) {\n          const line = seriesElement.elem(\n            'path',\n            {\n              d: path.stringify()\n            },\n            options.classNames.line,\n            true\n          );\n\n          this.eventEmitter.emit<LineDrawEvent>('draw', {\n            type: 'line',\n            values: normalizedData.series[seriesIndex],\n            path: path.clone(),\n            chartRect,\n            // TODO: Remove redundant\n            index: seriesIndex,\n            series,\n            seriesIndex,\n            meta: seriesMeta,\n            axisX,\n            axisY,\n            group: seriesElement,\n            element: line\n          });\n        }\n\n        // Area currently only works with axes that support a range!\n        if (seriesOptions.showArea && axisY.range) {\n          // If areaBase is outside the chart area (< min or > max) we need to set it respectively so that\n          // the area is not drawn outside the chart area.\n          const areaBase = Math.max(\n            Math.min(seriesOptions.areaBase, axisY.range.max),\n            axisY.range.min\n          );\n\n          // We project the areaBase value into screen coordinates\n          const areaBaseProjected = chartRect.y1 - axisY.projectValue(areaBase);\n\n          // In order to form the area we'll first split the path by move commands so we can chunk it up into segments\n          path\n            .splitByCommand('M')\n            // We filter only \"solid\" segments that contain more than one point. Otherwise there's no need for an area\n            .filter(pathSegment => pathSegment.pathElements.length > 1)\n            .map(solidPathSegments => {\n              // Receiving the filtered solid path segments we can now convert those segments into fill areas\n              const firstElement = solidPathSegments.pathElements[0];\n              const lastElement =\n                solidPathSegments.pathElements[\n                  solidPathSegments.pathElements.length - 1\n                ];\n\n              // Cloning the solid path segment with closing option and removing the first move command from the clone\n              // We then insert a new move that should start at the area base and draw a straight line up or down\n              // at the end of the path we add an additional straight line to the projected area base value\n              // As the closing option is set our path will be automatically closed\n              return solidPathSegments\n                .clone(true)\n                .position(0)\n                .remove(1)\n                .move(firstElement.x, areaBaseProjected)\n                .line(firstElement.x, firstElement.y)\n                .position(solidPathSegments.pathElements.length + 1)\n                .line(lastElement.x, areaBaseProjected);\n            })\n            .forEach(areaPath => {\n              // For each of our newly created area paths, we'll now create path elements by stringifying our path objects\n              // and adding the created DOM elements to the correct series group\n              const area = seriesElement.elem(\n                'path',\n                {\n                  d: areaPath.stringify()\n                },\n                options.classNames.area,\n                true\n              );\n\n              // Emit an event for each area that was drawn\n              this.eventEmitter.emit<AreaDrawEvent>('draw', {\n                type: 'area',\n                values: normalizedData.series[seriesIndex],\n                path: areaPath.clone(),\n                series,\n                seriesIndex,\n                axisX,\n                axisY,\n                chartRect,\n                // TODO: Remove redundant\n                index: seriesIndex,\n                group: seriesElement,\n                element: area,\n                meta: seriesMeta\n              });\n            });\n        }\n      },\n      options.reverseData\n    );\n\n    this.eventEmitter.emit<LineChartCreatedEvent>('created', {\n      chartRect,\n      axisX,\n      axisY,\n      svg,\n      options\n    });\n  }\n}\n"
  },
  {
    "path": "src/charts/LineChart/LineChart.types.ts",
    "content": "import type {\n  Options,\n  AxisOptions,\n  Data,\n  Series,\n  SeriesObject,\n  SegmentData,\n  CreatedEvent,\n  DrawEvent,\n  NormalizedSeriesValue,\n  NormalizedSeries,\n  AxesDrawEvent\n} from '../../core';\nimport type { SvgPath } from '../../svg';\nimport type { RequiredKeys } from '../../utils';\nimport type { BaseChartEventsTypes } from '../types';\n\nexport type LineInterpolation = (\n  pathCoordinates: number[],\n  valueData: SegmentData[]\n) => SvgPath;\n\nexport type LineChartData = Data<(Series | SeriesObject)[]>;\n\nexport interface LineChartOptions<\n  TXAxisOptions = AxisOptions,\n  TYAxisOptions = TXAxisOptions\n> extends Options<TXAxisOptions, TYAxisOptions> {\n  /**\n   * Override the class names that get used to generate the SVG structure of the chart\n   */\n  classNames?: {\n    chart?: string;\n    label?: string;\n    labelGroup?: string;\n    series?: string;\n    line?: string;\n    point?: string;\n    area?: string;\n    grid?: string;\n    gridGroup?: string;\n    gridBackground?: string;\n    vertical?: string;\n    horizontal?: string;\n    start?: string;\n    end?: string;\n  };\n  /**\n   * If the line should be drawn or not\n   */\n  showLine?: boolean;\n  /**\n   * If dots should be drawn or not\n   */\n  showPoint?: boolean;\n  /**\n   * If the line chart should draw an area\n   */\n  showArea?: boolean;\n  /**\n   * The base for the area chart that will be used to close the area shape (is normally 0)\n   */\n  areaBase?: number;\n  /**\n   * Specify if the lines should be smoothed.\n   * 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.\n   * You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function.\n   * Check the examples for a brief description.\n   */\n  lineSmooth?: boolean | LineInterpolation;\n  /**\n   * If the line chart should add a background fill to the .ct-grids group.\n   */\n  showGridBackground?: boolean;\n  /**\n   * 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.\n   */\n  fullWidth?: boolean;\n  /**\n   * If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n   */\n  reverseData?: boolean;\n  series?: Record<\n    string,\n    Omit<LineChartOptions<TXAxisOptions, TYAxisOptions>, 'series'>\n  >;\n}\n\nexport type LineChartOptionsWithDefaults = RequiredKeys<\n  LineChartOptions<\n    RequiredKeys<\n      AxisOptions,\n      | 'offset'\n      | 'position'\n      | 'labelOffset'\n      | 'showLabel'\n      | 'showGrid'\n      | 'labelInterpolationFnc'\n    >,\n    RequiredKeys<\n      AxisOptions,\n      | 'offset'\n      | 'position'\n      | 'labelOffset'\n      | 'showLabel'\n      | 'showGrid'\n      | 'labelInterpolationFnc'\n      | 'scaleMinSpace'\n    >\n  >,\n  | 'showLine'\n  | 'showPoint'\n  | 'areaBase'\n  | 'lineSmooth'\n  | 'chartPadding'\n  | 'axisX'\n  | 'axisY',\n  'classNames'\n>;\n\nexport type LineChartCreatedEvent = CreatedEvent<LineChartOptions>;\n\nexport interface PointDrawEvent extends DrawEvent {\n  type: 'point';\n  value: NormalizedSeriesValue;\n  x: number;\n  y: number;\n}\n\nexport interface LineDrawEvent extends DrawEvent {\n  type: 'line';\n  values: NormalizedSeries;\n  path: SvgPath;\n}\n\nexport interface AreaDrawEvent extends DrawEvent {\n  type: 'area';\n  values: NormalizedSeries;\n  path: SvgPath;\n}\n\nexport type LineChartEventsTypes = BaseChartEventsTypes<\n  LineChartCreatedEvent,\n  AxesDrawEvent | PointDrawEvent | LineDrawEvent | AreaDrawEvent\n>;\n"
  },
  {
    "path": "src/charts/LineChart/index.ts",
    "content": "export * from './LineChart';\nexport * from './LineChart.types';\n"
  },
  {
    "path": "src/charts/PieChart/PieChart.spec.ts",
    "content": "import { namespaces, deserialize } from '../../core';\nimport { PieChartOptions, PieChartData, PieChart } from '.';\nimport {\n  Fixture,\n  addMockWrapper,\n  destroyMockDom,\n  mockDom\n} from '../../../test/mock/dom';\n\ndescribe('Charts', () => {\n  describe('PieChart', () => {\n    let fixture: Fixture;\n    let chart: PieChart;\n    let options: PieChartOptions;\n    let data: PieChartData;\n\n    function createChart() {\n      return new Promise<void>(resolve => {\n        fixture = addMockWrapper(\n          '<div class=\"ct-chart ct-golden-section\"></div>'\n        );\n        const { wrapper } = fixture;\n        chart = new PieChart(\n          wrapper.querySelector('.ct-chart'),\n          data,\n          options\n        ).on('created', () => {\n          resolve();\n          chart.off('created');\n        });\n      });\n    }\n\n    beforeEach(() => {\n      mockDom();\n    });\n    afterEach(() => {\n      destroyMockDom();\n      data = { series: [] };\n      options = {};\n    });\n\n    describe('Meta data tests', () => {\n      it('should render meta data correctly on slice with mixed value array', async () => {\n        const fixture = addMockWrapper(\n          '<div class=\"ct-chart ct-golden-section\"></div>'\n        );\n        const meta = {\n          test: 'Serialized Test'\n        };\n\n        const data = {\n          labels: ['A', 'B', 'C'],\n          series: [\n            5,\n            {\n              value: 8,\n              meta: meta\n            },\n            1\n          ]\n        };\n\n        const chartContainer = fixture.wrapper.querySelector('.ct-chart');\n        const chart = new PieChart(chartContainer, data);\n\n        chart.on('created', () => {\n          const metaAttribute = chartContainer\n            ?.querySelectorAll('.ct-slice-pie')[1]\n            .getAttributeNS(namespaces.ct, 'meta');\n          expect(deserialize(metaAttribute)).toEqual(meta);\n          chart.off('created');\n        });\n      });\n    });\n\n    describe('Simple Pie Chart', () => {\n      const num = '\\\\d+(\\\\.\\\\d*)?';\n      const sum = (a: number, b: number) => a + b;\n\n      beforeEach(() => {\n        const series = [5, 3, 4];\n\n        data = {\n          series\n        };\n        options = {\n          width: 100,\n          height: 100,\n          chartPadding: 10,\n          labelInterpolationFnc: value =>\n            `${Math.round((Number(value) / series.reduce(sum)) * 100)}%`\n        };\n      });\n\n      it('should render three slices', async () => {\n        await createChart();\n\n        expect(fixture.wrapper.querySelectorAll('.ct-slice-pie').length).toBe(\n          3\n        );\n      });\n\n      it('should set value attribute', async () => {\n        await createChart();\n\n        const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie');\n        expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('5');\n        expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('3');\n        expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('4');\n      });\n\n      it('should create slice path', async () => {\n        await createChart();\n\n        Array.from(fixture.wrapper.querySelectorAll('.ct-slice-pie')).forEach(\n          element => {\n            const pattern = new RegExp(\n              `M${num},${num}A40,40,0,0,0,${num},${num}L50,50Z$`\n            );\n            const path = element.getAttribute('d');\n            expect(path).toMatch(pattern);\n          }\n        );\n      });\n\n      it('should add labels', async () => {\n        await createChart();\n\n        const labels = fixture.wrapper.querySelectorAll('.ct-label');\n        expect(labels[0]).toHaveTextContent('42%');\n        expect(labels[1]).toHaveTextContent('25%');\n        expect(labels[2]).toHaveTextContent('33%');\n      });\n\n      it('should overlap slices', async () => {\n        data = {\n          series: [1, 1]\n        };\n        await createChart();\n\n        const [slice1, slice2] = Array.from(\n          fixture.wrapper.querySelectorAll('.ct-slice-pie')\n        );\n\n        expect(slice1).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M50,90A40,40,0,0,0,50,10L50,50Z/)\n        );\n        expect(slice2).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M50,10A40,40,0,0,0,50.\\d+,90L50,50Z/)\n        );\n      });\n\n      it('should set large arc sweep flag', async () => {\n        data = {\n          series: [1, 2]\n        };\n        await createChart();\n\n        const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[1];\n        expect(slice).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M50,10A40,40,0,1,0/)\n        );\n      });\n\n      it('should draw complete circle with gap', async () => {\n        data = {\n          series: [1]\n        };\n        await createChart();\n\n        const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[0];\n        expect(slice).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M49.9\\d+,10A40,40,0,1,0,50,10L50,50Z/)\n        );\n      });\n\n      it('should draw complete circle with startAngle', async () => {\n        data.series = [100];\n        options.startAngle = 90;\n        await createChart();\n\n        const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[0];\n        expect(slice).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M90,49.9\\d+A40,40,0,1,0,90,50L50,50Z/)\n        );\n      });\n\n      it('should draw complete circle if values are 0', async () => {\n        data = {\n          series: [0, 1, 0]\n        };\n        await createChart();\n\n        const slice = fixture.wrapper.querySelectorAll('.ct-slice-pie')[1];\n        expect(slice).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M49.9\\d+,10A40,40,0,1,0,50,10L50,50Z/)\n        );\n      });\n    });\n\n    describe('Pie with small slices', () => {\n      beforeEach(() => {\n        data = {\n          series: [0.001, 2]\n        };\n        options = {\n          width: 100,\n          height: 100,\n          chartPadding: 0\n        };\n      });\n\n      it('should render correctly with very small slices', async () => {\n        await createChart();\n\n        const [slice1, slice2] = Array.from(\n          fixture.wrapper.querySelectorAll('.ct-slice-pie')\n        );\n\n        expect(slice1).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M50.1\\d+,0A50,50,0,0,0,50,0/)\n        );\n        expect(slice2).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M49.9\\d*,0A50,50,0,1,0,50,0/)\n        );\n      });\n\n      it('should render correctly with very small slices on startAngle', async () => {\n        options.startAngle = 90;\n        await createChart();\n\n        const [slice1, slice2] = Array.from(\n          fixture.wrapper.querySelectorAll('.ct-slice-pie')\n        );\n\n        expect(slice1).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M100,50.1\\d*A50,50,0,0,0,100,50/)\n        );\n        expect(slice2).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M100,49.97\\d*A50,50,0,1,0,100,49.98\\d*/)\n        );\n      });\n\n      it('should render correctly with very small slices', async () => {\n        options.donut = true;\n        await createChart();\n\n        const [slice1, slice2] = Array.from(\n          fixture.wrapper.querySelectorAll('.ct-slice-donut')\n        );\n\n        expect(slice1).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M50.\\d+,30A20,20,0,0,0,50,30/)\n        );\n        expect(slice2).toHaveAttribute(\n          'd',\n          expect.stringMatching(/^M49.9\\d*,30A20,20,0,1,0,50,30/)\n        );\n      });\n    });\n\n    describe('Pie with empty values', () => {\n      beforeEach(() => {\n        data = {\n          series: [1, 2, 0, 4]\n        };\n        options = {\n          width: 100,\n          height: 100,\n          ignoreEmptyValues: true\n        };\n      });\n\n      it('should not render empty slices', async () => {\n        await createChart();\n\n        const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie');\n\n        expect(slices.length).toBe(3);\n        expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('1');\n        expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('2');\n        expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('4');\n      });\n\n      it('should render without NaN values and points', async () => {\n        data = {\n          series: [0, 0, 0]\n        };\n        options = {\n          width: 400,\n          height: 400\n        };\n        await createChart();\n\n        const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie');\n\n        expect(slices.length).toBe(3);\n\n        expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('0');\n        expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('0');\n        expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('0');\n\n        expect(slices[0]).toHaveAttribute(\n          'd',\n          'M200,5A195,195,0,0,0,200,5L200,200Z'\n        );\n        expect(slices[1]).toHaveAttribute(\n          'd',\n          'M200,5A195,195,0,0,0,200,5L200,200Z'\n        );\n        expect(slices[2]).toHaveAttribute(\n          'd',\n          'M200,5A195,195,0,0,0,200,5L200,200Z'\n        );\n      });\n\n      it('should render empty slices', async () => {\n        data = {\n          series: [1, 2, 0, 4]\n        };\n        options = {\n          width: 100,\n          height: 100,\n          ignoreEmptyValues: false\n        };\n        await createChart();\n\n        const slices = fixture.wrapper.querySelectorAll('.ct-slice-pie');\n\n        expect(slices.length).toBe(4);\n\n        expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('1');\n        expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('2');\n        expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('0');\n        expect(slices[3].getAttributeNS(namespaces.ct, 'value')).toBe('4');\n      });\n    });\n\n    describe('Gauge Chart', () => {\n      beforeEach(() => {\n        data = {\n          series: [20, 10, 30, 40]\n        };\n        options = {\n          chartPadding: 50,\n          height: 500,\n          width: 500,\n          donut: true,\n          donutWidth: 60,\n          startAngle: 270,\n          total: 200,\n          showLabel: false\n        };\n      });\n\n      it('should render four strokes', async () => {\n        await createChart();\n\n        expect(fixture.wrapper.querySelectorAll('.ct-slice-donut').length).toBe(\n          4\n        );\n      });\n\n      it('should set value attribute', async () => {\n        await createChart();\n\n        const slices = fixture.wrapper.querySelectorAll('.ct-slice-donut');\n        expect(slices[0].getAttributeNS(namespaces.ct, 'value')).toBe('20');\n        expect(slices[1].getAttributeNS(namespaces.ct, 'value')).toBe('10');\n        expect(slices[2].getAttributeNS(namespaces.ct, 'value')).toBe('30');\n        expect(slices[3].getAttributeNS(namespaces.ct, 'value')).toBe('40');\n      });\n\n      it('should create slice path', async () => {\n        const num = '\\\\d+(\\\\.\\\\d*)?';\n        const pattern = new RegExp(\n          `^M${num},${num}A170,170,0,0,0,${num},${num}$`\n        );\n        await createChart();\n\n        Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach(\n          element =>\n            expect(element).toHaveAttribute('d', expect.stringMatching(pattern))\n        );\n      });\n\n      it('should set stroke-width', async () => {\n        const strokeWidth = new RegExp('stroke-width:\\\\s*60px');\n        await createChart();\n\n        Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach(\n          element =>\n            expect(element).toHaveAttribute(\n              // eslint-disable-next-line jest-dom/prefer-to-have-style\n              'style',\n              expect.stringMatching(strokeWidth)\n            )\n        );\n      });\n\n      it('should not add labels', async () => {\n        await createChart();\n\n        const labels = fixture.wrapper.querySelectorAll('.ct-label');\n        expect(labels.length).toBe(0);\n      });\n    });\n\n    describe('Pie Chart with relative donutWidth', () => {\n      beforeEach(() => {\n        data = {\n          series: [20, 10, 30, 40]\n        };\n        options = {\n          chartPadding: 50,\n          height: 500,\n          width: 500,\n          donut: true,\n          donutWidth: '25%',\n          showLabel: false\n        };\n      });\n\n      it('should render four strokes', async () => {\n        await createChart();\n\n        expect(fixture.wrapper.querySelectorAll('.ct-slice-donut').length).toBe(\n          4\n        );\n      });\n\n      it('should create slice path', async () => {\n        const num = '\\\\d+(\\\\.\\\\d*)?';\n        const pattern = new RegExp(\n          `^M${num},${num}A175,175,0,0,0,${num},${num}$`\n        );\n        await createChart();\n\n        Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach(\n          element =>\n            expect(element).toHaveAttribute('d', expect.stringMatching(pattern))\n        );\n      });\n\n      it('should set stroke-width', async () => {\n        const strokeWidth = new RegExp('stroke-width:\\\\s?50px');\n        await createChart();\n\n        Array.from(fixture.wrapper.querySelectorAll('.ct-slice-donut')).forEach(\n          element =>\n            expect(element).toHaveAttribute(\n              // eslint-disable-next-line jest-dom/prefer-to-have-style\n              'style',\n              expect.stringMatching(strokeWidth)\n            )\n        );\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/charts/PieChart/PieChart.stories.ts",
    "content": "import 'chartist-dev/styles';\nimport { PieChart } from 'chartist-dev';\n\nexport default {\n  title: 'PieChart',\n  argTypes: {}\n};\n\nexport function Default() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [5, 3, 4]\n    },\n    {\n      width: 100,\n      height: 100,\n      chartPadding: 10\n    }\n  );\n\n  return root;\n}\n\nexport function Labels() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      labels: ['A', 'B', 'C'],\n      series: [5, 8, 1]\n    },\n    {}\n  );\n\n  return root;\n}\n\nexport function OverlappingLabels() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      labels: ['Big Slice', 11231231, 'Test the string', new Date(), 124124124],\n      series: [96, 1, 1, 1, 1]\n    },\n    {\n      preventOverlappingLabelOffset: 12\n    }\n  );\n\n  return root;\n}\n\nexport function LabelInterpolation() {\n  const root = document.createElement('div');\n  const data = {\n    series: [5, 3, 4]\n  };\n  const sum = (a: number, b: number) => a + b;\n\n  new PieChart(root, data, {\n    width: 100,\n    height: 100,\n    chartPadding: 10,\n    labelInterpolationFnc: value =>\n      `${Math.round((Number(value) / data.series.reduce(sum)) * 100)}%`\n  });\n\n  return root;\n}\n\nexport function StartAngle() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [5, 3, 4]\n    },\n    {\n      startAngle: 90\n    }\n  );\n\n  return root;\n}\n\nexport function SmallSlices() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [0.001, 2]\n    },\n    {\n      width: 100,\n      height: 100,\n      chartPadding: 0\n    }\n  );\n\n  return root;\n}\n\nexport function IgnoreEmptyValues() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [1, 2, 0, 4]\n    },\n    {\n      ignoreEmptyValues: true\n    }\n  );\n\n  return root;\n}\n\nexport function Donut() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [5, 3, 4]\n    },\n    {\n      donut: true\n    }\n  );\n\n  return root;\n}\n\nexport function GaugeDonut() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [20, 10, 30, 40]\n    },\n    {\n      chartPadding: 50,\n      height: 500,\n      width: 500,\n      donut: true,\n      donutWidth: 60,\n      startAngle: 270,\n      total: 200,\n      showLabel: false\n    }\n  );\n\n  return root;\n}\n\nexport function RelativeDonutWidth() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [20, 10, 30, 40]\n    },\n    {\n      chartPadding: 50,\n      height: 500,\n      width: 500,\n      donut: true,\n      donutWidth: '25%',\n      showLabel: false\n    }\n  );\n\n  return root;\n}\n\nexport function Solid() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [20, 10, 30, 40]\n    },\n    {\n      donut: true,\n      donutWidth: 60,\n      // donutSolid: true,\n      startAngle: 270,\n      showLabel: true\n    }\n  );\n\n  return root;\n}\n\nexport function ViewBox() {\n  const root = document.createElement('div');\n\n  new PieChart(\n    root,\n    {\n      series: [5, 3, 4]\n    },\n    {\n      chartPadding: 10,\n      viewBox: {\n        width: 350,\n        height: 350\n      }\n    },\n    [\n      [\n        'screen and (max-width: 575px)',\n        {\n          viewBox: {\n            width: 250,\n            height: 250\n          }\n        }\n      ]\n    ]\n  );\n\n  return root;\n}\n"
  },
  {
    "path": "src/charts/PieChart/PieChart.ts",
    "content": "import type {\n  LabelDirection,\n  AnchorPosition,\n  Dot,\n  PieChartData,\n  PieChartOptions,\n  PieChartOptionsWithDefaults,\n  PieChartCreatedEvent,\n  SliceDrawEvent,\n  SliceLabelDrawEvent,\n  PieChartEventsTypes\n} from './PieChart.types';\nimport type { Svg } from '../../svg';\nimport type { ResponsiveOptions } from '../../core';\nimport {\n  alphaNumerate,\n  quantity,\n  normalizeData,\n  serialize,\n  createSvg,\n  createChartRect,\n  polarToCartesian\n} from '../../core';\nimport {\n  noop,\n  sum,\n  extend,\n  isFalseyButZero,\n  safeHasProperty\n} from '../../utils';\nimport { SvgPath } from '../../svg';\nimport { BaseChart } from '../BaseChart';\n\n/**\n * Default options in line charts. Expand the code view to see a detailed list of options with comments.\n */\nconst defaultOptions = {\n  // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')\n  width: undefined,\n  // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')\n  height: undefined,\n  // 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}\n  chartPadding: 5,\n  // Override the class names that are used to generate the SVG structure of the chart\n  classNames: {\n    chartPie: 'ct-chart-pie',\n    chartDonut: 'ct-chart-donut',\n    series: 'ct-series',\n    slicePie: 'ct-slice-pie',\n    sliceDonut: 'ct-slice-donut',\n    label: 'ct-label'\n  },\n  // The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.\n  startAngle: 0,\n  // 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.\n  total: undefined,\n  // If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.\n  donut: false,\n  // Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.\n  // This option can be set as number or string to specify a relative width (i.e. 100 or '30%').\n  donutWidth: 60,\n  // If a label should be shown or not\n  showLabel: true,\n  // 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.\n  labelOffset: 0,\n  // 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.\n  labelPosition: 'inside',\n  // An interpolation function for the label value\n  labelInterpolationFnc: noop,\n  // 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.\n  labelDirection: 'neutral',\n  // If true empty values will be ignored to avoid drawing unnecessary slices and labels\n  ignoreEmptyValues: false,\n  // 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)\n  preventOverlappingLabelOffset: 0\n};\n\n/**\n * Determines SVG anchor position based on direction and center parameter\n */\nexport function determineAnchorPosition(\n  center: Dot,\n  label: Dot,\n  direction: LabelDirection\n): AnchorPosition {\n  const toTheRight = label.x > center.x;\n\n  if (\n    (toTheRight && direction === 'explode') ||\n    (!toTheRight && direction === 'implode')\n  ) {\n    return 'start';\n  } else if (\n    (toTheRight && direction === 'implode') ||\n    (!toTheRight && direction === 'explode')\n  ) {\n    return 'end';\n  } else {\n    return 'middle';\n  }\n}\n\nexport class PieChart extends BaseChart<PieChartEventsTypes> {\n  /**\n   * This method creates a new pie chart and returns an object that can be used to redraw the chart.\n   * @param query A selector query string or directly a DOM element\n   * @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.\n   * @param options The options object with options that override the default options. Check the examples for a detailed list.\n   * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n   *\n   * @example\n   * ```ts\n   * // Simple pie chart example with four series\n   * new PieChart('.ct-chart', {\n   *   series: [10, 2, 4, 3]\n   * });\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Drawing a donut chart\n   * new PieChart('.ct-chart', {\n   *   series: [10, 2, 4, 3]\n   * }, {\n   *   donut: true\n   * });\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Using donut, startAngle and total to draw a gauge chart\n   * new PieChart('.ct-chart', {\n   *   series: [20, 10, 30, 40]\n   * }, {\n   *   donut: true,\n   *   donutWidth: 20,\n   *   startAngle: 270,\n   *   total: 200\n   * });\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Drawing a pie chart with padding and labels that are outside the pie\n   * new PieChart('.ct-chart', {\n   *   series: [20, 10, 30, 40]\n   * }, {\n   *   chartPadding: 30,\n   *   labelOffset: 50,\n   *   labelDirection: 'explode'\n   * });\n   * ```\n   *\n   * @example\n   * ```ts\n   * // Overriding the class names for individual series as well as a name and meta data.\n   * // The name will be written as ct:series-name attribute and the meta data will be serialized and written\n   * // to a ct:meta attribute.\n   * new PieChart('.ct-chart', {\n   *   series: [{\n   *     value: 20,\n   *     name: 'Series 1',\n   *     className: 'my-custom-class-one',\n   *     meta: 'Meta One'\n   *   }, {\n   *     value: 10,\n   *     name: 'Series 2',\n   *     className: 'my-custom-class-two',\n   *     meta: 'Meta Two'\n   *   }, {\n   *     value: 70,\n   *     name: 'Series 3',\n   *     className: 'my-custom-class-three',\n   *     meta: 'Meta Three'\n   *   }]\n   * });\n   * ```\n   */\n  constructor(\n    query: string | Element | null,\n    protected override data: PieChartData,\n    options?: PieChartOptions,\n    responsiveOptions?: ResponsiveOptions<PieChartOptions>\n  ) {\n    super(\n      query,\n      data,\n      defaultOptions,\n      extend({}, defaultOptions, options),\n      responsiveOptions\n    );\n  }\n\n  /**\n   * Check if a label has overlapping text then move it the number of pixels up and left based on textSize.\n   * @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions.\n   * @param existingLabelPos - Label position that has already been placed that chartist will check against.\n   * @param textOffset - this is configured with preventOverlappingLabelOffset option.\n   * @param length - How many characters long the label is.\n   */\n  moveLabel(\n    labelPos: Dot,\n    existingLabelPos: Dot,\n    textOffset: number,\n    length: number\n  ) {\n    if (\n      labelPos.y > existingLabelPos.y - textOffset &&\n      labelPos.y < existingLabelPos.y + textOffset &&\n      labelPos.x > existingLabelPos.x - length * textOffset &&\n      labelPos.x < existingLabelPos.x + length * textOffset\n    ) {\n      labelPos.y -= textOffset;\n      labelPos.x -= textOffset;\n      this.moveLabel(labelPos, existingLabelPos, textOffset, length);\n    }\n  }\n\n  /**\n   * Creates the pie chart\n   *\n   * @param options\n   */\n  createChart(options: PieChartOptionsWithDefaults) {\n    const { data } = this;\n    const normalizedData = normalizeData(data);\n    const seriesGroups: Svg[] = [];\n    let labelsGroup: Svg;\n    const labelPositions: Dot[] = [];\n    let labelRadius: number;\n    let startAngle = options.startAngle;\n\n    // Create SVG.js draw\n    const svg = createSvg(\n      this.container,\n      options.width,\n      options.height,\n      options.donut\n        ? options.classNames.chartDonut\n        : options.classNames.chartPie,\n      options.viewBox\n    );\n\n    this.svg = svg;\n\n    // Calculate charting rect\n    const chartRect = createChartRect(svg, options);\n    // Get biggest circle radius possible within chartRect\n    let radius = Math.min(chartRect.width() / 2, chartRect.height() / 2);\n    // Calculate total of all series to get reference value or use total reference from optional options\n    const totalDataSum = options.total || normalizedData.series.reduce(sum, 0);\n\n    const donutWidth = quantity(options.donutWidth);\n    if (donutWidth.unit === '%') {\n      donutWidth.value *= radius / 100;\n    }\n\n    // If this is a donut chart we need to adjust our radius to enable strokes to be drawn inside\n    // Unfortunately this is not possible with the current SVG Spec\n    // See this proposal for more details: http://lists.w3.org/Archives/Public/www-svg/2003Oct/0000.html\n    radius -= options.donut ? donutWidth.value / 2 : 0;\n\n    // If labelPosition is set to `outside` or a donut chart is drawn then the label position is at the radius,\n    // if regular pie chart it's half of the radius\n    if (options.labelPosition === 'outside' || options.donut) {\n      labelRadius = radius;\n    } else if (options.labelPosition === 'center') {\n      // If labelPosition is center we start with 0 and will later wait for the labelOffset\n      labelRadius = 0;\n    } else {\n      // Default option is 'inside' where we use half the radius so the label will be placed in the center of the pie\n      // slice\n      labelRadius = radius / 2;\n    }\n    // Add the offset to the labelRadius where a negative offset means closed to the center of the chart\n    if (options.labelOffset) {\n      labelRadius += options.labelOffset;\n    }\n\n    // Calculate end angle based on total sum and current data value and offset with padding\n    const center = {\n      x: chartRect.x1 + chartRect.width() / 2,\n      y: chartRect.y2 + chartRect.height() / 2\n    };\n\n    // Check if there is only one non-zero value in the series array.\n    const hasSingleValInSeries =\n      data.series.filter(val =>\n        safeHasProperty(val, 'value') ? val.value !== 0 : val !== 0\n      ).length === 1;\n\n    // Creating the series groups\n    data.series.forEach((_, index) => (seriesGroups[index] = svg.elem('g')));\n    // if we need to show labels we create the label group now\n    if (options.showLabel) {\n      labelsGroup = svg.elem('g');\n    }\n\n    // Draw the series\n    // initialize series groups\n    data.series.forEach((series, index) => {\n      // If current value is zero and we are ignoring empty values then skip to next value\n      if (normalizedData.series[index] === 0 && options.ignoreEmptyValues) {\n        return;\n      }\n\n      const seriesName = safeHasProperty(series, 'name') && series.name;\n      const seriesClassName =\n        safeHasProperty(series, 'className') && series.className;\n      const seriesMeta = safeHasProperty(series, 'meta')\n        ? series.meta\n        : undefined;\n\n      // If the series is an object and contains a name or meta data we add a custom attribute\n      if (seriesName) {\n        seriesGroups[index].attr({\n          'ct:series-name': seriesName\n        });\n      }\n\n      // Use series class from series data or if not set generate one\n      seriesGroups[index].addClass(\n        [\n          options.classNames?.series,\n          seriesClassName ||\n            `${options.classNames?.series}-${alphaNumerate(index)}`\n        ].join(' ')\n      );\n\n      // If the whole dataset is 0 endAngle should be zero. Can't divide by 0.\n      let endAngle =\n        totalDataSum > 0\n          ? startAngle + (normalizedData.series[index] / totalDataSum) * 360\n          : 0;\n\n      // Use slight offset so there are no transparent hairline issues\n      const overlappigStartAngle = Math.max(\n        0,\n        startAngle - (index === 0 || hasSingleValInSeries ? 0 : 0.2)\n      );\n\n      // If we need to draw the arc for all 360 degrees we need to add a hack where we close the circle\n      // with Z and use 359.99 degrees\n      if (endAngle - overlappigStartAngle >= 359.99) {\n        endAngle = overlappigStartAngle + 359.99;\n      }\n\n      const start = polarToCartesian(\n        center.x,\n        center.y,\n        radius,\n        overlappigStartAngle\n      );\n      const end = polarToCartesian(center.x, center.y, radius, endAngle);\n\n      // 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\n      const path = new SvgPath(!options.donut)\n        .move(end.x, end.y)\n        .arc(\n          radius,\n          radius,\n          0,\n          Number(endAngle - startAngle > 180),\n          0,\n          start.x,\n          start.y\n        );\n\n      // If regular pie chart (no donut) we add a line to the center of the circle for completing the pie\n      if (!options.donut) {\n        path.line(center.x, center.y);\n      }\n\n      // Create the SVG path\n      // If this is a donut chart we add the donut class, otherwise just a regular slice\n      const pathElement = seriesGroups[index].elem(\n        'path',\n        {\n          d: path.stringify()\n        },\n        options.donut\n          ? options.classNames.sliceDonut\n          : options.classNames.slicePie\n      );\n\n      // Adding the pie series value to the path\n      pathElement.attr({\n        'ct:value': normalizedData.series[index],\n        'ct:meta': serialize(seriesMeta)\n      });\n\n      // If this is a donut, we add the stroke-width as style attribute\n      if (options.donut) {\n        pathElement.attr({\n          style: 'stroke-width: ' + donutWidth.value + 'px'\n        });\n      }\n\n      // Fire off draw event\n      this.eventEmitter.emit<SliceDrawEvent>('draw', {\n        type: 'slice',\n        value: normalizedData.series[index],\n        totalDataSum: totalDataSum,\n        index,\n        meta: seriesMeta,\n        series,\n        group: seriesGroups[index],\n        element: pathElement,\n        path: path.clone(),\n        center,\n        radius,\n        startAngle,\n        endAngle,\n        chartRect\n      });\n\n      // If we need to show labels we need to add the label for this slice now\n      if (options.showLabel) {\n        let labelPosition: Dot;\n\n        if (data.series.length === 1) {\n          // If we have only 1 series, we can position the label in the center of the pie\n          labelPosition = {\n            x: center.x,\n            y: center.y\n          };\n        } else {\n          // Position at the labelRadius distance from center and between start and end angle\n          labelPosition = polarToCartesian(\n            center.x,\n            center.y,\n            labelRadius,\n            startAngle + (endAngle - startAngle) / 2\n          );\n        }\n\n        let rawValue;\n        if (\n          normalizedData.labels &&\n          !isFalseyButZero(normalizedData.labels[index])\n        ) {\n          rawValue = normalizedData.labels[index];\n        } else {\n          rawValue = normalizedData.series[index];\n        }\n\n        const interpolatedValue = options.labelInterpolationFnc(\n          rawValue,\n          index\n        );\n\n        if (interpolatedValue || interpolatedValue === 0) {\n          if (options.preventOverlappingLabelOffset) {\n            const textOffset = options.preventOverlappingLabelOffset;\n            const length = String(normalizedData.labels[index]).length;\n\n            labelPositions.forEach(item => {\n              this.moveLabel(labelPosition, item, textOffset, length);\n            });\n            labelPositions.push(labelPosition);\n          }\n\n          const labelElement = labelsGroup\n            .elem(\n              'text',\n              {\n                dx: labelPosition.x,\n                dy: labelPosition.y,\n                'text-anchor': determineAnchorPosition(\n                  center,\n                  labelPosition,\n                  options.labelDirection\n                )\n              },\n              options.classNames.label\n            )\n            .text(String(interpolatedValue));\n\n          // Fire off draw event\n          this.eventEmitter.emit<SliceLabelDrawEvent>('draw', {\n            type: 'label',\n            index,\n            group: labelsGroup,\n            element: labelElement,\n            text: '' + interpolatedValue,\n            chartRect,\n            series,\n            meta: seriesMeta,\n            ...labelPosition\n          });\n        }\n      }\n\n      // Set next startAngle to current endAngle.\n      // (except for last slice)\n      startAngle = endAngle;\n    });\n\n    this.eventEmitter.emit<PieChartCreatedEvent>('created', {\n      chartRect,\n      svg: svg,\n      options\n    });\n  }\n}\n"
  },
  {
    "path": "src/charts/PieChart/PieChart.types.ts",
    "content": "import type {\n  Options,\n  Label,\n  Data,\n  FlatSeries,\n  CreatedEvent,\n  DrawEvent,\n  NormalizedSeriesValue\n} from '../../core';\nimport type { RequiredKeys } from '../../utils';\nimport type { SvgPath } from '../../svg';\nimport type { BaseChartEventsTypes } from '../types';\n\nexport type PieChartData = Data<FlatSeries>;\n\nexport type LabelDirection = 'implode' | 'neutral' | 'explode';\n\nexport type AnchorPosition = 'start' | 'middle' | 'end';\n\nexport type RadialLabelPosition = 'inside' | 'center' | 'outside';\n\nexport interface Dot {\n  x: number;\n  y: number;\n}\n\nexport interface PieChartOptions extends Omit<Options, 'axisX' | 'axisY'> {\n  /**\n   * Override the class names that are used to generate the SVG structure of the chart\n   */\n  classNames?: {\n    chartPie?: string;\n    chartDonut?: string;\n    series?: string;\n    slicePie?: string;\n    sliceDonut?: string;\n    label?: string;\n  };\n  /**\n   * The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.\n   */\n  startAngle?: number;\n  /**\n   * 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.\n   */\n  total?: number;\n  /**\n   * If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.\n   */\n  donut?: boolean;\n  /**\n   * Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.\n   * This option can be set as number or string to specify a relative width (i.e. 100 or '30%').\n   */\n  donutWidth?: number | string;\n  /**\n   * If a label should be shown or not\n   */\n  showLabel?: boolean;\n  /**\n   * 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.\n   */\n  labelOffset?: number;\n  /**\n   * This option can be set to 'inside', 'outside' or 'center'.\n   * 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'.\n   * 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.\n   * The 'center' option only makes sense in conjunction with the 'labelOffset' option.\n   */\n  labelPosition?: RadialLabelPosition;\n  /**\n   * An interpolation function for the label value\n   */\n  labelInterpolationFnc?(value: Label, index: number): Label | null | undefined;\n  /**\n   * Label direction can be 'neutral', 'explode' or 'implode'.\n   * 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.\n   * Usually explode is useful when labels are positioned far away from the center.\n   */\n  labelDirection?: LabelDirection;\n  /**\n   * If true empty values will be ignored to avoid drawing unnecessary slices and labels\n   */\n  ignoreEmptyValues?: boolean;\n  /**\n   * If nonzero labels will not overlap.\n   */\n  preventOverlappingLabelOffset?: number;\n}\n\nexport type PieChartOptionsWithDefaults = RequiredKeys<\n  PieChartOptions,\n  | 'chartPadding'\n  | 'startAngle'\n  | 'donutWidth'\n  | 'showLabel'\n  | 'labelOffset'\n  | 'labelPosition'\n  | 'labelInterpolationFnc'\n  | 'labelDirection'\n  | 'preventOverlappingLabelOffset',\n  'classNames'\n>;\n\nexport type PieChartCreatedEvent = Omit<\n  CreatedEvent<PieChartOptions>,\n  'axisX' | 'axisY'\n>;\n\nexport interface SliceDrawEvent\n  extends Omit<DrawEvent, 'axisX' | 'axisY' | 'seriesIndex'> {\n  type: 'slice';\n  value: NormalizedSeriesValue;\n  totalDataSum: number;\n  path: SvgPath;\n  center: Dot;\n  radius: number;\n  startAngle: number;\n  endAngle: number;\n}\n\nexport interface SliceLabelDrawEvent\n  extends Omit<DrawEvent, 'axisX' | 'axisY' | 'seriesIndex'> {\n  type: 'label';\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport type PieChartEventsTypes = BaseChartEventsTypes<\n  PieChartCreatedEvent,\n  SliceDrawEvent | SliceLabelDrawEvent\n>;\n"
  },
  {
    "path": "src/charts/PieChart/index.ts",
    "content": "export * from './PieChart';\nexport * from './PieChart.types';\n"
  },
  {
    "path": "src/charts/index.ts",
    "content": "export * from './BaseChart';\nexport * from './LineChart';\nexport * from './BarChart';\nexport * from './PieChart';\nexport * from './types';\n"
  },
  {
    "path": "src/charts/types.ts",
    "content": "import type {\n  DataEvent,\n  OptionsChangedEvent,\n  DrawEvent,\n  CreatedEvent\n} from '../core';\nimport type { AnimationEvent } from '../svg';\n\nexport interface BaseChartEventsTypes<\n  TCreateEvent = CreatedEvent,\n  TDrawEvents = DrawEvent\n> {\n  data: DataEvent;\n  options: OptionsChangedEvent;\n  animationBegin: AnimationEvent;\n  animationEnd: AnimationEvent;\n  created: TCreateEvent;\n  draw: TDrawEvents;\n}\n"
  },
  {
    "path": "src/core/constants.ts",
    "content": "/**\n * This object contains all namespaces used within Chartist.\n */\nexport const namespaces: Record<string, string> = {\n  svg: 'http://www.w3.org/2000/svg',\n  xmlns: 'http://www.w3.org/2000/xmlns/',\n  xhtml: 'http://www.w3.org/1999/xhtml',\n  xlink: 'http://www.w3.org/1999/xlink',\n  ct: 'http://gionkunz.github.com/chartist-js/ct'\n};\n\n/**\n * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.\n */\nexport const precision = 8;\n\n/**\n * A map with characters to escape for strings to be safely used as attribute values.\n */\nexport const escapingMap: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#039;'\n};\n"
  },
  {
    "path": "src/core/creation.spec.ts",
    "content": "import { addMockWrapper, mockDom, destroyMockDom } from '../../test/mock/dom';\nimport {\n  createSvg,\n  createGrid,\n  createGridBackground,\n  normalizePadding\n} from './creation';\nimport { EventEmitter } from '../event';\nimport { Svg } from '../svg';\n\ndescribe('Core', () => {\n  describe('Creation', () => {\n    beforeEach(() => mockDom());\n    afterEach(() => destroyMockDom());\n\n    describe('createSvg', () => {\n      it('should not remove non-chartist svg elements', () => {\n        const fixture = addMockWrapper(`\n          <div id=\"chart-container\">\n            <svg id=\"foo\"></svg>\n            <div>\n              <svg id=\"bar\"></svg>\n            </div>\n          </div>\n        `);\n\n        const container: any =\n          fixture.wrapper.querySelector('#chart-container');\n        const svg = createSvg(container, '500px', '400px', 'ct-fish-bar');\n\n        expect(svg).toBeDefined();\n        expect(svg.classes()).toContain('ct-fish-bar');\n        expect(svg.attr('viewBox')).toBeFalsy();\n        expect(container).toContainElement(document.querySelector('#foo'));\n        expect(container).toContainElement(document.querySelector('#bar'));\n      });\n\n      it('should remove previous chartist svg elements', () => {\n        const fixture = addMockWrapper('<div id=\"chart-container\"></div>');\n\n        const container: any =\n          fixture.wrapper.querySelector('#chart-container');\n        const svg1 = createSvg(container, '500px', '400px', 'ct-fish-bar');\n        const svg2 = createSvg(container, '800px', '200px', 'ct-snake-bar');\n\n        expect(svg1).toBeDefined();\n        expect(svg1.classes()).toContain('ct-fish-bar');\n        expect(svg2).toBeDefined();\n        expect(svg2.classes()).toContain('ct-snake-bar');\n        expect(container).not.toContainElement(\n          document.querySelector('.ct-fish-bar')\n        );\n        expect(container).toContainElement(\n          document.querySelector('.ct-snake-bar')\n        );\n      });\n\n      it('should add viewBox to svg elements', () => {\n        const fixture = addMockWrapper(`\n          <div id=\"chart-container\">\n          </div>\n        `);\n\n        const container: any =\n          fixture.wrapper.querySelector('#chart-container');\n        const svg = createSvg(container, '500px', '400px', 'ct-fish-bar', {\n          width: 300,\n          height: 200\n        });\n\n        expect(svg).toBeDefined();\n        expect(svg.classes()).toContain('ct-fish-bar');\n        expect(svg.attr('viewBox')).toEqual('0 0 300 200');\n        expect(container).toContainElement(\n          document.querySelector('.ct-fish-bar')\n        );\n      });\n    });\n\n    describe('createGrid', () => {\n      let group: any;\n      let axis: any;\n      let classes: any;\n      let eventEmitter: EventEmitter;\n      let position: any;\n      let length: any;\n      let offset: any;\n\n      beforeEach(() => {\n        eventEmitter = new EventEmitter();\n        group = new Svg('g');\n        axis = {\n          units: {\n            pos: 'x'\n          },\n          counterUnits: {\n            pos: 'y'\n          }\n        };\n        classes = [];\n        position = 10;\n        length = 100;\n        offset = 20;\n      });\n\n      function onCreated(fn: any, done: any) {\n        eventEmitter.on('draw', grid => {\n          fn(grid);\n          done();\n        });\n        createGrid(\n          position,\n          1,\n          axis,\n          offset,\n          length,\n          group,\n          classes,\n          eventEmitter\n        );\n      }\n\n      it('should add single grid line to group', done => {\n        onCreated(\n          () =>\n            expect(group.querySelectorAll('line').svgElements.length).toBe(1),\n          done\n        );\n      });\n\n      it('should draw line', done => {\n        onCreated(() => {\n          const line = group.querySelector('line');\n          expect(line.attr('x1')).toBe('10');\n          expect(line.attr('x2')).toBe('10');\n          expect(line.attr('y1')).toBe('20');\n          expect(line.attr('y2')).toBe('120');\n        }, done);\n      });\n\n      it('should draw horizontal line', done => {\n        axis.units.pos = 'y';\n        axis.counterUnits.pos = 'x';\n        onCreated(() => {\n          const line = group.querySelector('line');\n          expect(line.attr('y1')).toBe('10');\n          expect(line.attr('y2')).toBe('10');\n          expect(line.attr('x1')).toBe('20');\n          expect(line.attr('x2')).toBe('120');\n        }, done);\n      });\n    });\n\n    describe('createGridBackground', () => {\n      let group: any;\n      let chartRect: any;\n      let className: any;\n      let eventEmitter: any;\n\n      beforeEach(() => {\n        eventEmitter = new EventEmitter();\n        group = new Svg('g');\n        className = 'ct-test';\n        chartRect = {\n          x1: 5,\n          y2: 10,\n          _width: 100,\n          _height: 50,\n          width() {\n            return this._width;\n          },\n          height() {\n            return this._height;\n          }\n        };\n      });\n\n      function onCreated(fn: any, done: any) {\n        eventEmitter.on('draw', (data: any) => {\n          fn(data);\n          done();\n        });\n        createGridBackground(group, chartRect, className, eventEmitter);\n      }\n\n      it('should add rect', done => {\n        onCreated(() => {\n          const rects = group.querySelectorAll('rect').svgElements;\n          expect(rects.length).toBe(1);\n          const rect = rects[0];\n          expect(rect.attr('x')).toBe('5');\n          expect(rect.attr('y')).toBe('10');\n          expect(rect.attr('width')).toBe('100');\n          expect(rect.attr('height')).toBe('50');\n          expect(rect.classes()).toEqual(['ct-test']);\n        }, done);\n      });\n\n      it('should pass grid to event', done => {\n        onCreated((data: any) => {\n          expect(data.type).toBe('gridBackground');\n          const rect = data.element;\n          expect(rect.attr('x')).toBe('5');\n          expect(rect.attr('y')).toBe('10');\n        }, done);\n      });\n    });\n\n    describe('padding normalization', () => {\n      it('should normalize number padding', () => {\n        expect(normalizePadding(10)).toEqual({\n          top: 10,\n          right: 10,\n          bottom: 10,\n          left: 10\n        });\n      });\n\n      it('should normalize number padding when 0 is passed', () => {\n        expect(normalizePadding(0)).toEqual({\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0\n        });\n      });\n\n      it('should normalize empty padding object with default fallback', () => {\n        expect(normalizePadding({})).toEqual({\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0\n        });\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/creation.ts",
    "content": "import type {\n  ChartPadding,\n  ChartRect,\n  Options,\n  Label,\n  GridDrawEvent,\n  GridBackgroundDrawEvent,\n  LabelDrawEvent,\n  ViewBox\n} from './types';\nimport type { EventEmitter } from '../event';\nimport type { Axis } from '../axes';\nimport { namespaces } from './constants';\nimport { Svg } from '../svg/Svg';\nimport { quantity } from './lang';\n\n/**\n * Create or reinitialize the SVG element for the chart\n * @param container The containing DOM Node object that will be used to plant the SVG element\n * @param width Set the width of the SVG element. Default is 100%\n * @param height Set the height of the SVG element. Default is 100%\n * @param className Specify a class to be added to the SVG element\n * @return The created/reinitialized SVG element\n */\nexport function createSvg(\n  container: Element,\n  width: number | string = '100%',\n  height: number | string = '100%',\n  className?: string,\n  viewBox?: ViewBox\n) {\n  if (!container) {\n    throw new Error('Container element is not found');\n  }\n\n  // Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it\n  // Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/\n  Array.from(container.querySelectorAll('svg'))\n    .filter(svg => svg.getAttributeNS(namespaces.xmlns, 'ct'))\n    .forEach(svg => container.removeChild(svg));\n\n  // Create svg object with width and height or use 100% as default\n  const svg = new Svg('svg')\n    .attr({\n      width,\n      height\n    })\n    .attr({\n      // TODO: Check better solution (browser support) and remove inline styles due to CSP\n      style: `width: ${width}; height: ${height};`\n    });\n\n  if (className) {\n    svg.addClass(className);\n  }\n\n  if (viewBox) {\n    svg.attr({ viewBox: `0 0 ${viewBox.width} ${viewBox.height}` });\n  }\n\n  // Add the DOM node to our container\n  container.appendChild(svg.getNode());\n\n  return svg;\n}\n\n/**\n * Converts a number into a padding object.\n * @param padding\n * @param fallback This value is used to fill missing values if a incomplete padding object was passed\n * @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.\n */\nexport function normalizePadding(\n  padding: number | Partial<ChartPadding> | undefined\n) {\n  return typeof padding === 'number'\n    ? {\n        top: padding,\n        right: padding,\n        bottom: padding,\n        left: padding\n      }\n    : padding === undefined\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : {\n        top: typeof padding.top === 'number' ? padding.top : 0,\n        right: typeof padding.right === 'number' ? padding.right : 0,\n        bottom: typeof padding.bottom === 'number' ? padding.bottom : 0,\n        left: typeof padding.left === 'number' ? padding.left : 0\n      };\n}\n\n/**\n * Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right\n * @param svg The svg element for the chart\n * @param options The Object that contains all the optional values for the chart\n * @return The chart rectangles coordinates inside the svg element plus the rectangles measurements\n */\nexport function createChartRect(svg: Svg, options: Options) {\n  const hasAxis = Boolean(options.axisX || options.axisY);\n  const yAxisOffset = options.axisY?.offset || 0;\n  const xAxisOffset = options.axisX?.offset || 0;\n  const yAxisPosition = options.axisY?.position;\n  const xAxisPosition = options.axisX?.position;\n  // If width or height results in invalid value (including 0) we fallback to the unitless settings or even 0\n  let width =\n    options.viewBox?.width || svg.width() || quantity(options.width).value || 0;\n  let height =\n    options.viewBox?.height ||\n    svg.height() ||\n    quantity(options.height).value ||\n    0;\n  const normalizedPadding = normalizePadding(options.chartPadding);\n\n  // If settings were to small to cope with offset (legacy) and padding, we'll adjust\n  width = Math.max(\n    width,\n    yAxisOffset + normalizedPadding.left + normalizedPadding.right\n  );\n  height = Math.max(\n    height,\n    xAxisOffset + normalizedPadding.top + normalizedPadding.bottom\n  );\n\n  const chartRect = {\n    x1: 0,\n    x2: 0,\n    y1: 0,\n    y2: 0,\n    padding: normalizedPadding,\n    width() {\n      return this.x2 - this.x1;\n    },\n    height() {\n      return this.y1 - this.y2;\n    }\n  };\n\n  if (hasAxis) {\n    if (xAxisPosition === 'start') {\n      chartRect.y2 = normalizedPadding.top + xAxisOffset;\n      chartRect.y1 = Math.max(\n        height - normalizedPadding.bottom,\n        chartRect.y2 + 1\n      );\n    } else {\n      chartRect.y2 = normalizedPadding.top;\n      chartRect.y1 = Math.max(\n        height - normalizedPadding.bottom - xAxisOffset,\n        chartRect.y2 + 1\n      );\n    }\n\n    if (yAxisPosition === 'start') {\n      chartRect.x1 = normalizedPadding.left + yAxisOffset;\n      chartRect.x2 = Math.max(\n        width - normalizedPadding.right,\n        chartRect.x1 + 1\n      );\n    } else {\n      chartRect.x1 = normalizedPadding.left;\n      chartRect.x2 = Math.max(\n        width - normalizedPadding.right - yAxisOffset,\n        chartRect.x1 + 1\n      );\n    }\n  } else {\n    chartRect.x1 = normalizedPadding.left;\n    chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1);\n    chartRect.y2 = normalizedPadding.top;\n    chartRect.y1 = Math.max(\n      height - normalizedPadding.bottom,\n      chartRect.y2 + 1\n    );\n  }\n\n  return chartRect;\n}\n\n/**\n * Creates a grid line based on a projected value.\n */\nexport function createGrid(\n  position: number,\n  index: number,\n  axis: Axis,\n  offset: number,\n  length: number,\n  group: Svg,\n  classes: string[],\n  eventEmitter: EventEmitter\n) {\n  const positionalData = {\n    [`${axis.units.pos}1`]: position,\n    [`${axis.units.pos}2`]: position,\n    [`${axis.counterUnits.pos}1`]: offset,\n    [`${axis.counterUnits.pos}2`]: offset + length\n  } as Record<'x1' | 'y1' | 'x2' | 'y2', number>;\n\n  const gridElement = group.elem('line', positionalData, classes.join(' '));\n\n  // Event for grid draw\n  eventEmitter.emit<GridDrawEvent>('draw', {\n    type: 'grid',\n    axis,\n    index,\n    group,\n    element: gridElement,\n    ...positionalData\n  });\n}\n\n/**\n * Creates a grid background rect and emits the draw event.\n */\nexport function createGridBackground(\n  gridGroup: Svg,\n  chartRect: ChartRect,\n  className: string,\n  eventEmitter: EventEmitter\n) {\n  const gridBackground = gridGroup.elem(\n    'rect',\n    {\n      x: chartRect.x1,\n      y: chartRect.y2,\n      width: chartRect.width(),\n      height: chartRect.height()\n    },\n    className,\n    true\n  );\n\n  // Event for grid background draw\n  eventEmitter.emit<GridBackgroundDrawEvent>('draw', {\n    type: 'gridBackground',\n    group: gridGroup,\n    element: gridBackground\n  });\n}\n\n/**\n * Creates a label based on a projected value and an axis.\n */\nexport function createLabel(\n  position: number,\n  length: number,\n  index: number,\n  label: Label,\n  axis: Axis,\n  axisOffset: number,\n  labelOffset: { x: number; y: number },\n  group: Svg,\n  classes: string[],\n  eventEmitter: EventEmitter\n) {\n  const positionalData = {\n    [axis.units.pos]: position + labelOffset[axis.units.pos],\n    [axis.counterUnits.pos]: labelOffset[axis.counterUnits.pos],\n    [axis.units.len]: length,\n    [axis.counterUnits.len]: Math.max(0, axisOffset - 10)\n  } as Record<'x' | 'y' | 'width' | 'height', number>;\n  // We need to set width and height explicitly to px as span will not expand with width and height being\n  // 100% in all browsers\n  const stepLength = Math.round(positionalData[axis.units.len]);\n  const stepCounterLength = Math.round(positionalData[axis.counterUnits.len]);\n  const content = document.createElement('span');\n\n  content.className = classes.join(' ');\n  content.style[axis.units.len] = stepLength + 'px';\n  content.style[axis.counterUnits.len] = stepCounterLength + 'px';\n  content.textContent = String(label);\n\n  const labelElement = group.foreignObject(content, {\n    style: 'overflow: visible;',\n    ...positionalData\n  });\n\n  eventEmitter.emit<LabelDrawEvent>('draw', {\n    type: 'label',\n    axis,\n    index,\n    group,\n    element: labelElement,\n    text: label,\n    ...positionalData\n  });\n}\n"
  },
  {
    "path": "src/core/data/bound.spec.ts",
    "content": "import { getBounds } from './bounds';\nimport { roundWithPrecision } from '../math';\n\ndescribe('Core', () => {\n  describe('Data', () => {\n    describe('Bounds', () => {\n      it('should return 10 steps', () => {\n        const bounds = getBounds(100, { high: 10, low: 1 }, 10, false);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(10);\n        expect(bounds.values).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n      });\n\n      it('should return 5 steps', () => {\n        const bounds = getBounds(100, { high: 10, low: 1 }, 20, false);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(10);\n        expect(bounds.values).toEqual([1, 3, 5, 7, 9]);\n      });\n\n      it('should return non integer steps', () => {\n        const bounds = getBounds(100, { high: 2, low: 1 }, 20, false);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(2);\n        expect(bounds.values).toEqual([1, 1.25, 1.5, 1.75, 2]);\n      });\n\n      it('should return integer steps only', () => {\n        const bounds = getBounds(100, { high: 3, low: 1 }, 20, true);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(3);\n        expect(bounds.values).toEqual([1, 2, 3]);\n      });\n\n      it('should return single integer step', () => {\n        const bounds = getBounds(100, { high: 2, low: 1 }, 20, true);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(2);\n        expect(bounds.values).toEqual([1, 2]);\n      });\n\n      it('should floor/ceil min/max', () => {\n        const bounds = getBounds(100, { high: 9.9, low: 1.01 }, 20, false);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(10);\n        expect(bounds.values).toEqual([1, 3, 5, 7, 9]);\n      });\n\n      it('should floor/ceil min/max for non integers', () => {\n        const bounds = getBounds(100, { high: 2.9, low: 1.01 }, 20, false);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(3);\n        expect(bounds.values).toEqual([1, 1.5, 2, 2.5, 3]);\n      });\n\n      it('should floor/ceil min/max if integers only', () => {\n        const bounds = getBounds(100, { high: 2.9, low: 1.01 }, 20, true);\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(3);\n        expect(bounds.values).toEqual([1, 2, 3]);\n      });\n\n      it('should return neg and pos values', () => {\n        const bounds = getBounds(100, { high: 1.9, low: -0.9 }, 20, false);\n        expect(bounds.min).toBe(-1);\n        expect(bounds.max).toBe(2);\n        expect(bounds.values).toEqual([-1, 0, 1, 2]);\n      });\n\n      it('should return two steps if no space', () => {\n        const bounds = getBounds(100, { high: 5, low: 0 }, 45, false);\n        expect(bounds.min).toBe(0);\n        expect(bounds.max).toBe(5);\n        expect(bounds.values).toEqual([0, 4]);\n      });\n\n      it('should return single step if no space', () => {\n        const bounds = getBounds(100, { high: 5, low: 0 }, 80, false);\n        expect(bounds.min).toBe(0);\n        expect(bounds.max).toBe(5);\n        expect(bounds.values).toEqual([0]);\n      });\n\n      it('should return single step if range is less than epsilon', () => {\n        const bounds = getBounds(\n          100,\n          { high: 1.0000000000000002, low: 1 },\n          20,\n          false\n        );\n        expect(bounds.min).toBe(1);\n        expect(bounds.max).toBe(1.0000000000000002);\n        expect(bounds.low).toBe(1);\n        expect(bounds.high).toBe(1.0000000000000002);\n        expect(bounds.values).toEqual([1]);\n      });\n\n      it('should return single step if range is less than smallest increment', () => {\n        const bounds = getBounds(\n          613.234375,\n          { high: 1000.0000000000001, low: 999.9999999999997 },\n          50,\n          false\n        );\n        expect(bounds.min).toBe(999.9999999999999);\n        expect(bounds.max).toBe(1000);\n        expect(bounds.low).toBe(999.9999999999997);\n        expect(bounds.high).toBe(1000.0000000000001);\n        expect(bounds.values).toEqual([roundWithPrecision(999.9999999999999)]);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/data/bounds.ts",
    "content": "import type { Bounds } from '../types';\nimport {\n  orderOfMagnitude,\n  projectLength,\n  roundWithPrecision,\n  rho,\n  EPSILON\n} from '../math';\n\n/**\n * Calculate and retrieve all the bounds for the chart and return them in one array\n * @param axisLength The length of the Axis used for\n * @param highLow An object containing a high and low property indicating the value range of the chart.\n * @param scaleMinSpace The minimum projected length a step should result in\n * @param onlyInteger\n * @return All the values to set the bounds of the chart\n */\nexport function getBounds(\n  axisLength: number,\n  highLow: { high: number; low: number },\n  scaleMinSpace: number,\n  onlyInteger = false\n) {\n  const bounds: Bounds = {\n    high: highLow.high,\n    low: highLow.low,\n    valueRange: 0,\n    oom: 0,\n    step: 0,\n    min: 0,\n    max: 0,\n    range: 0,\n    numberOfSteps: 0,\n    values: []\n  };\n\n  bounds.valueRange = bounds.high - bounds.low;\n  bounds.oom = orderOfMagnitude(bounds.valueRange);\n  bounds.step = Math.pow(10, bounds.oom);\n  bounds.min = Math.floor(bounds.low / bounds.step) * bounds.step;\n  bounds.max = Math.ceil(bounds.high / bounds.step) * bounds.step;\n  bounds.range = bounds.max - bounds.min;\n  bounds.numberOfSteps = Math.round(bounds.range / bounds.step);\n\n  // Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace\n  // If we are already below the scaleMinSpace value we will scale up\n  const length = projectLength(axisLength, bounds.step, bounds);\n  const scaleUp = length < scaleMinSpace;\n  const smallestFactor = onlyInteger ? rho(bounds.range) : 0;\n\n  // First check if we should only use integer steps and if step 1 is still larger than scaleMinSpace so we can use 1\n  if (onlyInteger && projectLength(axisLength, 1, bounds) >= scaleMinSpace) {\n    bounds.step = 1;\n  } else if (\n    onlyInteger &&\n    smallestFactor < bounds.step &&\n    projectLength(axisLength, smallestFactor, bounds) >= scaleMinSpace\n  ) {\n    // If step 1 was too small, we can try the smallest factor of range\n    // If the smallest factor is smaller than the current bounds.step and the projected length of smallest factor\n    // is larger than the scaleMinSpace we should go for it.\n    bounds.step = smallestFactor;\n  } else {\n    // Trying to divide or multiply by 2 and find the best step value\n    let optimizationCounter = 0;\n    for (;;) {\n      if (\n        scaleUp &&\n        projectLength(axisLength, bounds.step, bounds) <= scaleMinSpace\n      ) {\n        bounds.step *= 2;\n      } else if (\n        !scaleUp &&\n        projectLength(axisLength, bounds.step / 2, bounds) >= scaleMinSpace\n      ) {\n        bounds.step /= 2;\n        if (onlyInteger && bounds.step % 1 !== 0) {\n          bounds.step *= 2;\n          break;\n        }\n      } else {\n        break;\n      }\n\n      if (optimizationCounter++ > 1000) {\n        throw new Error(\n          'Exceeded maximum number of iterations while optimizing scale step!'\n        );\n      }\n    }\n  }\n\n  bounds.step = Math.max(bounds.step, EPSILON);\n  function safeIncrement(value: number, increment: number) {\n    // If increment is too small use *= (1+EPSILON) as a simple nextafter\n    if (value === (value += increment)) {\n      value *= 1 + (increment > 0 ? EPSILON : -EPSILON);\n    }\n    return value;\n  }\n\n  // Narrow min and max based on new step\n  let newMin = bounds.min;\n  let newMax = bounds.max;\n  while (newMin + bounds.step <= bounds.low) {\n    newMin = safeIncrement(newMin, bounds.step);\n  }\n  while (newMax - bounds.step >= bounds.high) {\n    newMax = safeIncrement(newMax, -bounds.step);\n  }\n  bounds.min = newMin;\n  bounds.max = newMax;\n  bounds.range = bounds.max - bounds.min;\n\n  const values: number[] = [];\n  for (let i = bounds.min; i <= bounds.max; i = safeIncrement(i, bounds.step)) {\n    const value = roundWithPrecision(i);\n    if (value !== values[values.length - 1]) {\n      values.push(value);\n    }\n  }\n  bounds.values = values;\n\n  return bounds;\n}\n"
  },
  {
    "path": "src/core/data/data.ts",
    "content": "import type {\n  Multi,\n  AxisName,\n  FlatSeriesValue,\n  Series,\n  SeriesObject\n} from '../types';\nimport { safeHasProperty, getNumberOrUndefined } from '../../utils';\n\n/**\n * Get meta data of a specific value in a series.\n */\nexport function getMetaData(\n  seriesData: FlatSeriesValue | Series | SeriesObject,\n  index: number\n) {\n  const value = Array.isArray(seriesData)\n    ? seriesData[index]\n    : safeHasProperty(seriesData, 'data')\n    ? seriesData.data[index]\n    : null;\n  return safeHasProperty(value, 'meta') ? value.meta : undefined;\n}\n\n/**\n * Checks if a value is considered a hole in the data series.\n * @returns True if the value is considered a data hole\n */\nexport function isDataHoleValue(value: unknown): value is null | undefined;\nexport function isDataHoleValue(value: unknown) {\n  return (\n    value === null ||\n    value === undefined ||\n    (typeof value === 'number' && isNaN(value))\n  );\n}\n\n/**\n * Checks if value is array of series objects.\n */\nexport function isArrayOfSeries(\n  value: unknown\n): value is (Series | SeriesObject)[] {\n  return (\n    Array.isArray(value) &&\n    value.every(_ => Array.isArray(_) || safeHasProperty(_, 'data'))\n  );\n}\n\n/**\n * Checks if provided value object is multi value (contains x or y properties)\n */\nexport function isMultiValue(value: unknown): value is Multi {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    (Reflect.has(value, 'x') || Reflect.has(value, 'y'))\n  );\n}\n\n/**\n * 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`.\n */\nexport function getMultiValue(\n  value: Multi | number | unknown,\n  dimension: AxisName = 'y'\n) {\n  if (isMultiValue(value) && safeHasProperty(value, dimension)) {\n    return getNumberOrUndefined(value[dimension]);\n  } else {\n    return getNumberOrUndefined(value);\n  }\n}\n"
  },
  {
    "path": "src/core/data/highLow.ts",
    "content": "import type {\n  Options,\n  AxisName,\n  NormalizedSeries,\n  NormalizedSeriesValue\n} from '../types';\nimport { safeHasProperty } from '../../utils';\nimport { isDataHoleValue } from './data';\n\n/**\n * Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart.\n * @param data The array that contains the data to be visualized in the chart\n * @param options The Object that contains the chart options\n * @param dimension Axis dimension 'x' or 'y' used to access the correct value and high / low configuration\n * @return An object that contains the highest and lowest value that will be visualized on the chart.\n */\nexport function getHighLow(\n  data: NormalizedSeries[],\n  options: Options,\n  dimension?: AxisName\n) {\n  // TODO: Remove workaround for deprecated global high / low config. Axis high / low configuration is preferred\n  options = {\n    ...options,\n    ...(dimension ? (dimension === 'x' ? options.axisX : options.axisY) : {})\n  };\n\n  const highLow = {\n    high: options.high === undefined ? -Number.MAX_VALUE : +options.high,\n    low: options.low === undefined ? Number.MAX_VALUE : +options.low\n  };\n  const findHigh = options.high === undefined;\n  const findLow = options.low === undefined;\n\n  // Function to recursively walk through arrays and find highest and lowest number\n  function recursiveHighLow(\n    sourceData: NormalizedSeriesValue | NormalizedSeries | NormalizedSeries[]\n  ) {\n    if (isDataHoleValue(sourceData)) {\n      return;\n    } else if (Array.isArray(sourceData)) {\n      for (let i = 0; i < sourceData.length; i++) {\n        recursiveHighLow(sourceData[i]);\n      }\n    } else {\n      const value = Number(\n        dimension && safeHasProperty(sourceData, dimension)\n          ? sourceData[dimension]\n          : sourceData\n      );\n\n      if (findHigh && value > highLow.high) {\n        highLow.high = value;\n      }\n\n      if (findLow && value < highLow.low) {\n        highLow.low = value;\n      }\n    }\n  }\n\n  // Start to find highest and lowest number recursively\n  if (findHigh || findLow) {\n    recursiveHighLow(data);\n  }\n\n  // Overrides of high / low based on reference value, it will make sure that the invisible reference value is\n  // used to generate the chart. This is useful when the chart always needs to contain the position of the\n  // invisible reference value in the view i.e. for bipolar scales.\n  if (options.referenceValue || options.referenceValue === 0) {\n    highLow.high = Math.max(options.referenceValue, highLow.high);\n    highLow.low = Math.min(options.referenceValue, highLow.low);\n  }\n\n  // If high and low are the same because of misconfiguration or flat data (only the same value) we need\n  // to set the high or low to 0 depending on the polarity\n  if (highLow.high <= highLow.low) {\n    // If both values are 0 we set high to 1\n    if (highLow.low === 0) {\n      highLow.high = 1;\n    } else if (highLow.low < 0) {\n      // If we have the same negative value for the bounds we set bounds.high to 0\n      highLow.high = 0;\n    } else if (highLow.high > 0) {\n      // If we have the same positive value for the bounds we set bounds.low to 0\n      highLow.low = 0;\n    } else {\n      // If data array was empty, values are Number.MAX_VALUE and -Number.MAX_VALUE. Set bounds to prevent errors\n      highLow.high = 1;\n      highLow.low = 0;\n    }\n  }\n\n  return highLow;\n}\n"
  },
  {
    "path": "src/core/data/index.ts",
    "content": "export * from './bounds';\nexport * from './data';\nexport * from './highLow';\nexport * from './normalize';\nexport * from './segments';\nexport * from './serialize';\n"
  },
  {
    "path": "src/core/data/normalize.spec.ts",
    "content": "import { normalizeData } from './normalize';\n\ndescribe('Core', () => {\n  describe('Data', () => {\n    describe('Normalize', () => {\n      it('should normalize mixed series types correctly', () => {\n        const data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            { data: [1, 0, 3, 4, 5, 6] },\n            [1, { value: 0 }, 3, { value: 4 }, 5, 6, 7, 8],\n            { data: [1, 0, { value: 3 }] }\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([\n          [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined],\n          [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined],\n          [\n            1,\n            0,\n            3,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined\n          ]\n        ]);\n      });\n\n      it('should normalize mixed series for pie chart correctly', () => {\n        const data = {\n          series: [1, { value: 0 }, 3, { value: 4 }, 5, 6, 7, 8]\n        };\n\n        expect(normalizeData(data).series).toEqual([1, 0, 3, 4, 5, 6, 7, 8]);\n      });\n\n      it('should normalize mixed series with string values for pie chart correctly', () => {\n        const data = {\n          series: ['1', { value: '0' }, '3', { value: '4' }, '5', '6', '7', '8']\n        };\n\n        expect(normalizeData(data).series).toEqual([1, 0, 3, 4, 5, 6, 7, 8]);\n      });\n\n      it('should normalize mixed series types with string values correctly', () => {\n        const data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            { data: ['1', '0', '3', '4', '5', '6'] },\n            ['1', { value: '0' }, '3', { value: '4' }, '5', '6', '7', '8'],\n            { data: ['1', '0', { value: '3' }] }\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([\n          [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined],\n          [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined],\n          [\n            1,\n            0,\n            3,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined\n          ]\n        ]);\n      });\n\n      it('should normalize mixed series types with weird values correctly', () => {\n        const data = {\n          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n          series: [\n            { data: [null, NaN, undefined, '4', '5', '6'] },\n            ['1', { value: null }, '3', { value: NaN }, '5', '6', '7', '8'],\n            { data: ['1', '0', { value: undefined }] }\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([\n          [\n            undefined,\n            undefined,\n            undefined,\n            4,\n            5,\n            6,\n            undefined,\n            undefined,\n            undefined,\n            undefined\n          ],\n          [1, undefined, 3, undefined, 5, 6, 7, 8, undefined, undefined],\n          [\n            1,\n            0,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined,\n            undefined\n          ]\n        ]);\n      });\n\n      it('should normalize correctly with 0 values in data series array objects', () => {\n        const data = {\n          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n          series: [\n            {\n              data: [\n                { value: 1 },\n                { value: 4 },\n                { value: 2 },\n                { value: 7 },\n                { value: 2 },\n                { value: 0 }\n              ]\n            }\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([[1, 4, 2, 7, 2, 0]]);\n      });\n\n      it('should normalize correctly with mixed dimensional input into multi dimensional output', () => {\n        const data = {\n          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n          series: [\n            {\n              data: [\n                { value: 1 },\n                { value: { y: 4, x: 1 } },\n                { y: 2, x: 2 },\n                NaN,\n                null,\n                { value: 7 },\n                { value: 2 },\n                { value: null },\n                { y: undefined, x: NaN }\n              ]\n            }\n          ]\n        };\n\n        expect(normalizeData(data, false, true).series).toEqual([\n          [\n            { x: undefined, y: 1 },\n            { x: 1, y: 4 },\n            { x: 2, y: 2 },\n            undefined,\n            undefined,\n            { x: undefined, y: 7 },\n            { x: undefined, y: 2 },\n            undefined,\n            undefined\n          ]\n        ]);\n      });\n\n      it('should normalize boolean series correctly', () => {\n        const data = {\n          series: [[true, false, false, true]]\n        };\n\n        expect(normalizeData(data).series).toEqual([[1, 0, 0, 1]]);\n      });\n\n      it('should normalize date series correctly', () => {\n        const data = {\n          series: [[new Date(0), new Date(1), new Date(2), new Date(3)]]\n        };\n\n        expect(normalizeData(data).series).toEqual([[0, 1, 2, 3]]);\n      });\n\n      it('should align series data by holes', () => {\n        const data = {\n          series: [\n            [1, 2, 3, 4],\n            [1, 2, 3],\n            [1, 2]\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([\n          [1, 2, 3, 4],\n          [1, 2, 3, undefined],\n          [1, 2, undefined, undefined]\n        ]);\n      });\n\n      it('should align series data with lables by holes', () => {\n        const data = {\n          labels: ['a', 'b', 'c', 'd', 'e', 'f'],\n          series: [\n            [1, 2, 3, 4],\n            [1, 2, 3],\n            [1, 2]\n          ]\n        };\n\n        expect(normalizeData(data).series).toEqual([\n          [1, 2, 3, 4, undefined, undefined],\n          [1, 2, 3, undefined, undefined, undefined],\n          [1, 2, undefined, undefined, undefined, undefined]\n        ]);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/data/normalize.ts",
    "content": "import type {\n  Data,\n  NormalizedData,\n  Multi,\n  AxisName,\n  NormalizedMulti,\n  Series,\n  FlatSeries,\n  NormalizedSeries,\n  NormalizedFlatSeries,\n  SeriesObject,\n  SeriesPrimitiveValue\n} from '../types';\nimport {\n  isArrayOfArrays,\n  times,\n  safeHasProperty,\n  getNumberOrUndefined\n} from '../../utils';\nimport { isDataHoleValue, isArrayOfSeries } from './data';\n\n/**\n * Ensures that the data object passed as second argument to the charts is present and correctly initialized.\n * @param data The data object that is passed as second argument to the charts\n * @return The normalized data object\n */\nexport function normalizeData(\n  data: Data<FlatSeries>,\n  reverse?: boolean,\n  multi?: false\n): NormalizedData<NormalizedFlatSeries>;\nexport function normalizeData(\n  data: Data<(Series | SeriesObject)[]>,\n  reverse: boolean | undefined,\n  multi: true | AxisName\n): NormalizedData<NormalizedSeries[]>;\nexport function normalizeData(\n  data: Data<FlatSeries | (Series | SeriesObject)[]>,\n  reverse: boolean | undefined,\n  multi: boolean | AxisName,\n  distributed: true\n): NormalizedData<NormalizedSeries[]>;\nexport function normalizeData(\n  data: Data<FlatSeries | (Series | SeriesObject)[]>,\n  reverse?: boolean,\n  multi?: boolean | AxisName\n): NormalizedData<NormalizedFlatSeries | NormalizedSeries[]>;\nexport function normalizeData(\n  data: Data,\n  reverse = false,\n  multi?: boolean | AxisName,\n  distributed?: boolean\n) {\n  let labelCount: number;\n  const normalized: NormalizedData = {\n    labels: (data.labels || []).slice(),\n    series: normalizeSeries(data.series, multi, distributed)\n  };\n  const inputLabelCount = normalized.labels.length;\n\n  // If all elements of the normalized data array are arrays we're dealing with\n  // multi series data and we need to find the largest series if they are un-even\n  if (isArrayOfArrays(normalized.series)) {\n    // Getting the series with the the most elements\n    labelCount = Math.max(\n      inputLabelCount,\n      ...normalized.series.map(series => series.length)\n    );\n\n    normalized.series.forEach(series => {\n      series.push(...times(Math.max(0, labelCount - series.length)));\n    });\n  } else {\n    // We're dealing with Pie data so we just take the normalized array length\n    labelCount = normalized.series.length;\n  }\n\n  // Padding the labels to labelCount with empty strings\n  normalized.labels.push(\n    ...times(Math.max(0, labelCount - inputLabelCount), () => '')\n  );\n\n  if (reverse) {\n    reverseData(normalized);\n  }\n\n  return normalized;\n}\n\n/**\n * Reverses the series, labels and series data arrays.\n */\nfunction reverseData(data: Data) {\n  data.labels?.reverse();\n  data.series.reverse();\n  for (const series of data.series) {\n    if (safeHasProperty(series, 'data')) {\n      series.data.reverse();\n    } else if (Array.isArray(series)) {\n      series.reverse();\n    }\n  }\n}\n\nfunction normalizeMulti(\n  value: number | string | boolean | Date | Multi,\n  multi?: boolean | AxisName\n) {\n  // We need to prepare multi value output (x and y data)\n  let x: number | undefined;\n  let y: number | undefined;\n\n  // Single series value arrays are assumed to specify the Y-Axis value\n  // For example: [1, 2] => [{x: undefined, y: 1}, {x: undefined, y: 2}]\n  // If multi is a string then it's assumed that it specified which dimension should be filled as default\n  if (typeof value !== 'object') {\n    const num = getNumberOrUndefined(value);\n\n    if (multi === 'x') {\n      x = num;\n    } else {\n      y = num;\n    }\n  } else {\n    if (safeHasProperty(value, 'x')) {\n      x = getNumberOrUndefined(value.x);\n    }\n\n    if (safeHasProperty(value, 'y')) {\n      y = getNumberOrUndefined(value.y);\n    }\n  }\n\n  if (x === undefined && y === undefined) {\n    return undefined;\n  }\n\n  return { x, y } as NormalizedMulti;\n}\n\nfunction normalizePrimitive(\n  value: SeriesPrimitiveValue,\n  multi?: boolean | AxisName\n) {\n  if (isDataHoleValue(value)) {\n    // We're dealing with a hole in the data and therefore need to return undefined\n    // We're also returning undefined for multi value output\n    return undefined;\n  }\n\n  if (multi) {\n    return normalizeMulti(value, multi);\n  }\n\n  return getNumberOrUndefined(value);\n}\n\nfunction normalizeSingleSeries(\n  series: Series | SeriesObject,\n  multi?: boolean | AxisName\n): NormalizedSeries {\n  if (!Array.isArray(series)) {\n    // We are dealing with series object notation so we need to recurse on data property\n    return normalizeSingleSeries(series.data, multi);\n  }\n\n  return series.map(value => {\n    if (safeHasProperty(value, 'value')) {\n      // We are dealing with value object notation so we need to recurse on value property\n      return normalizePrimitive(value.value, multi);\n    }\n\n    return normalizePrimitive(value, multi);\n  });\n}\n\n/**\n * Convert data series into plain array\n * @param series The series object that contains the data to be visualized in the chart\n * @param multi Create a multi dimensional array from a series data array where a value object with `x` and `y` values will be created.\n * @return A plain array that contains the data to be visualized in the chart\n */\nfunction normalizeSeries(\n  series: FlatSeries,\n  multi?: false,\n  distributed?: false\n): NormalizedFlatSeries;\nfunction normalizeSeries(\n  series: (Series | SeriesObject)[],\n  multi: true | AxisName,\n  distributed?: false\n): NormalizedSeries[];\nfunction normalizeSeries(\n  series: FlatSeries | (Series | SeriesObject)[],\n  multi: boolean | undefined | AxisName,\n  distributed: true\n): NormalizedSeries[];\nfunction normalizeSeries(\n  series: FlatSeries | (Series | SeriesObject)[],\n  multi?: boolean | undefined | AxisName,\n  distributed?: boolean\n): NormalizedFlatSeries | NormalizedSeries[];\nfunction normalizeSeries(\n  series: FlatSeries | (Series | SeriesObject)[],\n  multi?: boolean | undefined | AxisName,\n  distributed?: boolean\n) {\n  if (isArrayOfSeries(series)) {\n    return series.map(_ => normalizeSingleSeries(_, multi));\n  }\n\n  const normalizedSeries = normalizeSingleSeries(series, multi);\n\n  if (distributed) {\n    return normalizedSeries.map(value => [value]);\n  }\n\n  return normalizedSeries;\n}\n"
  },
  {
    "path": "src/core/data/segments.spec.ts",
    "content": "import { splitIntoSegments } from './segments';\n\ndescribe('Core', () => {\n  describe('Data', () => {\n    describe('Segments', () => {\n      function makeValues<T>(arr: T[]) {\n        return arr.map((x, i) => ({ value: x, valueIndex: i }));\n      }\n\n      it('should return empty array for empty input', () => {\n        expect(splitIntoSegments([], [])).toEqual([]);\n      });\n\n      it('should remove undefined values', () => {\n        const coords = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n        const values = makeValues([1, undefined, undefined, 4, undefined, 6]);\n\n        expect(splitIntoSegments(coords, values)).toEqual([\n          {\n            pathCoordinates: [1, 2],\n            valueData: [{ value: 1, valueIndex: 0 }]\n          },\n          {\n            pathCoordinates: [7, 8],\n            valueData: [{ value: 4, valueIndex: 3 }]\n          },\n          {\n            pathCoordinates: [11, 12],\n            valueData: [{ value: 6, valueIndex: 5 }]\n          }\n        ]);\n      });\n\n      it('should respect fillHoles option', () => {\n        const coords = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n        const values = makeValues([1, undefined, undefined, 4, undefined, 6]);\n        const options = {\n          fillHoles: true\n        };\n\n        expect(splitIntoSegments(coords, values, options)).toEqual([\n          {\n            pathCoordinates: [1, 2, 7, 8, 11, 12],\n            valueData: [\n              { value: 1, valueIndex: 0 },\n              { value: 4, valueIndex: 3 },\n              { value: 6, valueIndex: 5 }\n            ]\n          }\n        ]);\n      });\n\n      it('should respect increasingX option', () => {\n        const coords = [1, 2, 3, 4, 5, 6, 5, 6, 7, 8, 1, 2];\n        const values = makeValues([1, 2, 3, 4, 5, 6]);\n        const options = {\n          increasingX: true\n        };\n\n        expect(splitIntoSegments(coords, values, options)).toEqual([\n          {\n            pathCoordinates: [1, 2, 3, 4, 5, 6],\n            valueData: [\n              { value: 1, valueIndex: 0 },\n              { value: 2, valueIndex: 1 },\n              { value: 3, valueIndex: 2 }\n            ]\n          },\n          {\n            pathCoordinates: [5, 6, 7, 8],\n            valueData: [\n              { value: 4, valueIndex: 3 },\n              { value: 5, valueIndex: 4 }\n            ]\n          },\n          {\n            pathCoordinates: [1, 2],\n            valueData: [{ value: 6, valueIndex: 5 }]\n          }\n        ]);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/data/segments.ts",
    "content": "import type { Segment, SegmentData } from '../types';\nimport { getMultiValue } from './data';\n\n/**\n * Splits a list of coordinates and associated values into segments. Each returned segment contains a pathCoordinates\n * valueData property describing the segment.\n *\n * With the default options, segments consist of contiguous sets of points that do not have an undefined value. Any\n * points with undefined values are discarded.\n *\n * **Options**\n * The following options are used to determine how segments are formed\n * ```javascript\n * var options = {\n *   // If fillHoles is true, undefined values are simply discarded without creating a new segment. Assuming other options are default, this returns single segment.\n *   fillHoles: false,\n *   // If increasingX is true, the coordinates in all segments have strictly increasing x-values.\n *   increasingX: false\n * };\n * ```\n *\n * @param pathCoordinates List of point coordinates to be split in the form [x1, y1, x2, y2 ... xn, yn]\n * @param valueData List of associated point values in the form [v1, v2 .. vn]\n * @param options Options set by user\n * @return List of segments, each containing a pathCoordinates and valueData property.\n */\nexport function splitIntoSegments(\n  pathCoordinates: number[],\n  valueData: SegmentData[],\n  options?: {\n    increasingX?: boolean;\n    fillHoles?: boolean;\n  }\n) {\n  const finalOptions = {\n    increasingX: false,\n    fillHoles: false,\n    ...options\n  };\n\n  const segments: Segment[] = [];\n  let hole = true;\n\n  for (let i = 0; i < pathCoordinates.length; i += 2) {\n    // If this value is a \"hole\" we set the hole flag\n    if (getMultiValue(valueData[i / 2].value) === undefined) {\n      // if(valueData[i / 2].value === undefined) {\n      if (!finalOptions.fillHoles) {\n        hole = true;\n      }\n    } else {\n      if (\n        finalOptions.increasingX &&\n        i >= 2 &&\n        pathCoordinates[i] <= pathCoordinates[i - 2]\n      ) {\n        // X is not increasing, so we need to make sure we start a new segment\n        hole = true;\n      }\n\n      // If it's a valid value we need to check if we're coming out of a hole and create a new empty segment\n      if (hole) {\n        segments.push({\n          pathCoordinates: [],\n          valueData: []\n        });\n        // As we have a valid value now, we are not in a \"hole\" anymore\n        hole = false;\n      }\n\n      // Add to the segment pathCoordinates and valueData\n      segments[segments.length - 1].pathCoordinates.push(\n        pathCoordinates[i],\n        pathCoordinates[i + 1]\n      );\n      segments[segments.length - 1].valueData.push(valueData[i / 2]);\n    }\n  }\n\n  return segments;\n}\n"
  },
  {
    "path": "src/core/data/serialize.spec.ts",
    "content": "import { serialize, deserialize } from './serialize';\n\ndescribe('Core', () => {\n  describe('Data', () => {\n    describe('Serialize', () => {\n      it('should serialize and deserialize regular strings', () => {\n        const input = 'String test';\n        expect(input).toMatch(deserialize(serialize(input)));\n      });\n\n      it('should serialize and deserialize strings with critical characters', () => {\n        const input = 'String test with critical characters \" < > \\' & &amp;';\n        expect(input).toMatch(deserialize(serialize(input)));\n      });\n\n      it('should serialize and deserialize numbers', () => {\n        const input = 12345.6789;\n        expect(input).toEqual(deserialize(serialize(input)));\n      });\n\n      it('should serialize and deserialize dates', () => {\n        const input = new Date(0);\n        expect(+input).toEqual(+new Date(deserialize(serialize(input))));\n      });\n\n      it('should serialize and deserialize complex object types', () => {\n        const input = {\n          a: {\n            b: 100,\n            c: 'String test',\n            d: 'String test with critical characters \" < > \\' & &amp;',\n            e: {\n              f: 'String test'\n            }\n          }\n        };\n\n        expect(input).toEqual(deserialize(serialize(input)));\n      });\n\n      it('should serialize and deserialize null, undefined and NaN', () => {\n        expect(null).toEqual(deserialize(serialize(null)));\n        expect(undefined).toEqual(deserialize(serialize(undefined)));\n        expect(deserialize(serialize(NaN))).toBeNaN();\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/data/serialize.ts",
    "content": "import { escapingMap } from '../constants';\n\n/**\n * 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.\n * If called with null or undefined the function will return immediately with null or undefined.\n */\nexport function serialize(data: number | string | object): string;\nexport function serialize(\n  data: number | string | object | null | undefined | unknown\n): string | null | undefined;\nexport function serialize(\n  data: number | string | object | null | undefined | unknown\n) {\n  let serialized = '';\n\n  if (data === null || data === undefined) {\n    return data;\n  } else if (typeof data === 'number') {\n    serialized = '' + data;\n  } else if (typeof data === 'object') {\n    serialized = JSON.stringify({ data: data });\n  } else {\n    serialized = String(data);\n  }\n\n  return Object.keys(escapingMap).reduce(\n    (result, key) => result.replaceAll(key, escapingMap[key]),\n    serialized\n  );\n}\n\n/**\n * 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.\n */\nexport function deserialize<T extends object | number | string = object>(\n  data: string\n): T;\nexport function deserialize<T extends object | number | string = object>(\n  data: string | null | undefined\n): T | null | undefined;\nexport function deserialize(data: unknown) {\n  if (typeof data !== 'string') {\n    return data;\n  }\n\n  if (data === 'NaN') {\n    return NaN;\n  }\n\n  data = Object.keys(escapingMap).reduce(\n    (result, key) => result.replaceAll(escapingMap[key], key),\n    data\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let parsedData: any = data;\n\n  if (typeof data === 'string') {\n    try {\n      parsedData = JSON.parse(data);\n      parsedData = parsedData.data !== undefined ? parsedData.data : parsedData;\n    } catch (e) {\n      /* Ingore */\n    }\n  }\n\n  return parsedData;\n}\n"
  },
  {
    "path": "src/core/index.ts",
    "content": "export * from './constants';\nexport * from './lang';\nexport * from './math';\nexport * from './data';\nexport * from './creation';\nexport * from './optionsProvider';\nexport * from './types';\n"
  },
  {
    "path": "src/core/lang.spec.ts",
    "content": "import { quantity } from './lang';\n\ndescribe('Core', () => {\n  describe('Lang', () => {\n    describe('quantity', () => {\n      it('should return value for numbers', () => {\n        expect(quantity(100)).toEqual({ value: 100 });\n        expect(quantity(0)).toEqual({ value: 0 });\n        expect(quantity(NaN)).toEqual({ value: NaN });\n        expect(quantity(null)).toEqual({ value: 0 });\n        expect(quantity(undefined)).toEqual({ value: NaN });\n      });\n\n      it('should return value without unit from string', () => {\n        expect(quantity('100')).toEqual({ value: 100, unit: undefined });\n        expect(quantity('0')).toEqual({ value: 0, unit: undefined });\n      });\n\n      it('should return value and unit from string', () => {\n        expect(quantity('100%')).toEqual({ value: 100, unit: '%' });\n        expect(quantity('100 %')).toEqual({ value: 100, unit: '%' });\n        expect(quantity('0px')).toEqual({ value: 0, unit: 'px' });\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/core/lang.ts",
    "content": "/**\n * Converts a number to a string with a unit. If a string is passed then this will be returned unmodified.\n * @return Returns the passed number value with unit.\n */\nexport function ensureUnit<T>(value: T, unit: string) {\n  if (typeof value === 'number') {\n    return value + unit;\n  }\n\n  return value;\n}\n\n/**\n * Converts a number or string to a quantity object.\n * @return Returns an object containing the value as number and the unit as string.\n */\nexport function quantity<T>(input: T) {\n  if (typeof input === 'string') {\n    const match = /^(\\d+)\\s*(.*)$/g.exec(input);\n    return {\n      value: match ? +match[1] : 0,\n      unit: match?.[2] || undefined\n    };\n  }\n\n  return {\n    value: Number(input)\n  };\n}\n\n/**\n * Generates a-z from a number 0 to 26\n * @param n A number from 0 to 26 that will result in a letter a-z\n * @return A character from a-z based on the input number n\n */\nexport function alphaNumerate(n: number) {\n  // Limit to a-z\n  return String.fromCharCode(97 + (n % 26));\n}\n"
  },
  {
    "path": "src/core/math.ts",
    "content": "import type { Bounds } from './types';\nimport { precision as globalPrecision } from './constants';\n\nexport const EPSILON = 2.221e-16;\n\n/**\n * Calculate the order of magnitude for the chart scale\n * @param value The value Range of the chart\n * @return The order of magnitude\n */\nexport function orderOfMagnitude(value: number) {\n  return Math.floor(Math.log(Math.abs(value)) / Math.LN10);\n}\n\n/**\n * Project a data length into screen coordinates (pixels)\n * @param axisLength The svg element for the chart\n * @param length Single data value from a series array\n * @param bounds All the values to set the bounds of the chart\n * @return The projected data length in pixels\n */\nexport function projectLength(\n  axisLength: number,\n  length: number,\n  bounds: Bounds\n) {\n  return (length / bounds.range) * axisLength;\n}\n\n/**\n * 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.\n * @param value The value that should be rounded with precision\n * @param [digits] The number of digits after decimal used to do the rounding\n * @returns Rounded value\n */\nexport function roundWithPrecision(value: number, digits?: number) {\n  const precision = Math.pow(10, digits || globalPrecision);\n  return Math.round(value * precision) / precision;\n}\n\n/**\n * 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.\n * @param num An integer number where the smallest factor should be searched for\n * @returns The smallest integer factor of the parameter num.\n */\nexport function rho(num: number) {\n  if (num === 1) {\n    return num;\n  }\n\n  function gcd(p: number, q: number): number {\n    if (p % q === 0) {\n      return q;\n    } else {\n      return gcd(q, p % q);\n    }\n  }\n\n  function f(x: number) {\n    return x * x + 1;\n  }\n\n  let x1 = 2;\n  let x2 = 2;\n  let divisor: number;\n\n  if (num % 2 === 0) {\n    return 2;\n  }\n\n  do {\n    x1 = f(x1) % num;\n    x2 = f(f(x2)) % num;\n    divisor = gcd(Math.abs(x1 - x2), num);\n  } while (divisor === 1);\n\n  return divisor;\n}\n\n/**\n * Calculate cartesian coordinates of polar coordinates\n * @param centerX X-axis coordinates of center point of circle segment\n * @param centerY X-axis coordinates of center point of circle segment\n * @param radius Radius of circle segment\n * @param angleInDegrees Angle of circle segment in degrees\n * @return Coordinates of point on circumference\n */\nexport function polarToCartesian(\n  centerX: number,\n  centerY: number,\n  radius: number,\n  angleInDegrees: number\n) {\n  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians)\n  };\n}\n"
  },
  {
    "path": "src/core/optionsProvider.ts",
    "content": "import type { EventEmitter } from '../event';\nimport type { OptionsChangedEvent, ResponsiveOptions } from './types';\nimport { extend } from '../utils';\n\nexport interface OptionsProvider<T = unknown> {\n  removeMediaQueryListeners(): void;\n  getCurrentOptions(): T;\n}\n\n/**\n * Provides options handling functionality with callback for options changes triggered by responsive options and media query matches\n * @param options Options set by user\n * @param responsiveOptions Optional functions to add responsive behavior to chart\n * @param eventEmitter The event emitter that will be used to emit the options changed events\n * @return The consolidated options object from the defaults, base and matching responsive options\n */\nexport function optionsProvider<T = unknown>(\n  options: T,\n  responsiveOptions: ResponsiveOptions<T> | undefined,\n  eventEmitter: EventEmitter\n): OptionsProvider<T> {\n  let currentOptions: T;\n  const mediaQueryListeners: MediaQueryList[] = [];\n\n  function updateCurrentOptions(mediaEvent?: Event) {\n    const previousOptions = currentOptions;\n    currentOptions = extend({}, options);\n\n    if (responsiveOptions) {\n      responsiveOptions.forEach(responsiveOption => {\n        const mql = window.matchMedia(responsiveOption[0]);\n        if (mql.matches) {\n          currentOptions = extend({}, currentOptions, responsiveOption[1]);\n        }\n      });\n    }\n\n    if (eventEmitter && mediaEvent) {\n      eventEmitter.emit<OptionsChangedEvent<T>>('optionsChanged', {\n        previousOptions,\n        currentOptions\n      });\n    }\n  }\n\n  function removeMediaQueryListeners() {\n    mediaQueryListeners.forEach(mql =>\n      mql.removeEventListener('change', updateCurrentOptions)\n    );\n  }\n\n  if (!window.matchMedia) {\n    throw new Error(\n      \"window.matchMedia not found! Make sure you're using a polyfill.\"\n    );\n  } else if (responsiveOptions) {\n    responsiveOptions.forEach(responsiveOption => {\n      const mql = window.matchMedia(responsiveOption[0]);\n      mql.addEventListener('change', updateCurrentOptions);\n      mediaQueryListeners.push(mql);\n    });\n  }\n  // Execute initially without an event argument so we get the correct options\n  updateCurrentOptions();\n\n  return {\n    removeMediaQueryListeners,\n    getCurrentOptions() {\n      return currentOptions;\n    }\n  };\n}\n"
  },
  {
    "path": "src/core/types.ts",
    "content": "import type { RequiredKeys } from '../utils';\nimport type { Axis, AxisType } from '../axes';\nimport type { Svg } from '../svg';\n\nexport interface ChartPadding {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface ChartRect {\n  x1: number;\n  x2: number;\n  y1: number;\n  y2: number;\n  padding: ChartPadding;\n  width(): number;\n  height(): number;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Plugin = (chart: any, options?: any) => void;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Meta = any;\n\nexport interface ViewBox {\n  width: number;\n  height: number;\n}\n\nexport interface Options<\n  TXAxisOptions = AxisOptions,\n  TYAxisOptions = TXAxisOptions\n> {\n  /**\n   * Specify a fixed width for the chart as a string (i.e. '100px' or '50%')\n   */\n  width?: number | string;\n  /**\n   * Specify a fixed height for the chart as a string (i.e. '100px' or '50%')\n   */\n  height?: number | string;\n  /**\n   * Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n   */\n  low?: number;\n  /**\n   * Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n   */\n  high?: number;\n  /**\n   * Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.\n   */\n  referenceValue?: number;\n  /**\n   *  Padding of the chart drawing area to the container element and labels as a number or padding object.\n   */\n  chartPadding?: number | Partial<ChartPadding>;\n  /**\n   * Options for X-Axis\n   */\n  axisX?: TXAxisOptions;\n  /**\n   * Options for Y-Axis\n   */\n  axisY?: TYAxisOptions;\n  /**\n   * Override the class names that get used to generate the SVG structure of the chart\n   */\n  classNames?: Record<string, string>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plugins?: (Plugin | [Plugin, any])[];\n  /**\n   * 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.\n   */\n  viewBox?: ViewBox;\n}\n\nexport interface AxisOptions {\n  type?: AxisType;\n  /**\n   * Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n   */\n  low?: number;\n  /**\n   * Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n   */\n  high?: number;\n  /**\n   * Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.\n   */\n  referenceValue?: number;\n  /**\n   * The offset of the chart drawing area to the border of the container\n   */\n  offset?: number;\n  /**\n   * Position where labels are placed.\n   * 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.\n   */\n  position?: 'start' | 'end';\n  /**\n   * Allows you to correct label positioning on this axis by positive or negative x and y offset.\n   */\n  labelOffset?: {\n    x: number;\n    y: number;\n  };\n  /**\n   * If labels should be shown or not\n   */\n  showLabel?: boolean;\n  /**\n   * If the axis grid should be drawn or not\n   */\n  showGrid?: boolean;\n  /**\n   * Interpolation function that allows you to intercept the value from the axis label\n   */\n  labelInterpolationFnc?(value: Label, index: number): Label | null | undefined;\n  /**\n   * This value specifies the minimum width in pixel of the scale steps\n   */\n  scaleMinSpace?: number;\n  /**\n   * Use only integer values (whole numbers) for the scale steps\n   */\n  onlyInteger?: boolean;\n  ticks?: Label[];\n  stretch?: boolean;\n  divisor?: number;\n  highLow?: {\n    high: number;\n    low: number;\n  };\n}\n\nexport type OptionsWithDefaults = RequiredKeys<\n  Options<\n    RequiredKeys<\n      AxisOptions,\n      'offset' | 'labelOffset' | 'labelInterpolationFnc'\n    >,\n    RequiredKeys<\n      AxisOptions,\n      'offset' | 'labelOffset' | 'labelInterpolationFnc'\n    >\n  >,\n  'axisX' | 'axisY' | 'classNames'\n>;\n\nexport type ResponsiveOptions<T = Options> = [string, T][];\n\nexport interface Bounds {\n  high: number;\n  low: number;\n  valueRange: number;\n  oom: number;\n  step: number;\n  min: number;\n  max: number;\n  range: number;\n  numberOfSteps: number;\n  values: number[];\n}\n\nexport interface Segment {\n  pathCoordinates: number[];\n  valueData: SegmentData[];\n}\n\nexport interface SegmentData {\n  value: NormalizedSeriesValue;\n  valueIndex: number;\n  meta?: Meta;\n}\n\nexport type AxisName = 'x' | 'y';\n\nexport type Multi =\n  | {\n      x: number | string | Date | null;\n      y: number | string | Date | null;\n    }\n  | {\n      x: number | string | Date | null;\n    }\n  | {\n      y: number | string | Date | null;\n    };\n\nexport type NormalizedMulti =\n  | {\n      x: number;\n      y: number;\n    }\n  | {\n      x: number;\n    }\n  | {\n      y: number;\n    };\n\n/**\n * Data\n */\n\nexport type Label = string | number | Date;\n\nexport type AllSeriesTypes = FlatSeries | (Series | SeriesObject)[];\n\nexport interface Data<T extends AllSeriesTypes = AllSeriesTypes> {\n  labels?: Label[] | undefined;\n  series: T;\n}\n\n/**\n * Series\n */\n\nexport type Series<T = SeriesPrimitiveValue> = SeriesValue<T>[];\n\nexport interface SeriesObject<T = SeriesPrimitiveValue> {\n  name?: string;\n  className?: string;\n  meta?: Meta;\n  data: SeriesValue<T>[];\n}\n\nexport type SeriesValue<T = SeriesPrimitiveValue> = SeriesObjectValue<T> | T;\n\nexport type SeriesPrimitiveValue =\n  | number\n  | string\n  | boolean\n  | Date\n  | Multi\n  | null\n  | undefined;\n\nexport interface SeriesObjectValue<T = SeriesPrimitiveValue> {\n  meta?: Meta;\n  value: T;\n}\n\n/**\n * Flat Series\n */\n\nexport type FlatSeries<T = FlatSeriesPrimitiveValue> = FlatSeriesValue<T>[];\n\nexport type FlatSeriesValue<T = FlatSeriesPrimitiveValue> =\n  | SeriesValue<T>\n  | FlatSeriesObjectValue<T>;\n\nexport type FlatSeriesPrimitiveValue = number | string | null | undefined;\n\nexport interface FlatSeriesObjectValue<T = FlatSeriesPrimitiveValue> {\n  name?: string;\n  className?: string;\n  meta?: Meta;\n  value: T;\n}\n\n/**\n * Normalized Data\n */\n\nexport type AllNormalizedSeriesTypes =\n  | NormalizedFlatSeries\n  | NormalizedSeries[];\n\nexport interface NormalizedData<\n  T extends AllNormalizedSeriesTypes = AllNormalizedSeriesTypes\n> extends Data {\n  labels: Label[];\n  series: T;\n}\n\n/**\n * Normalized Series\n */\n\nexport type NormalizedSeries = NormalizedSeriesValue[];\n\nexport type NormalizedSeriesValue = NormalizedSeriesPrimitiveValue;\n\nexport type NormalizedSeriesPrimitiveValue =\n  | number\n  | NormalizedMulti\n  | undefined;\n\n/**\n * Normalized Flat Series\n */\n\nexport type NormalizedFlatSeries = number[];\n\n/**\n * Events\n */\n\nexport interface CreatedEvent<TOptions = Options> {\n  chartRect: ChartRect;\n  axisX: Axis;\n  axisY: Axis;\n  svg: Svg;\n  options: TOptions;\n}\n\nexport interface DrawEvent {\n  type: string;\n  element: Svg;\n  group: Svg;\n  chartRect: ChartRect;\n  axisX: Axis;\n  axisY: Axis;\n  meta: Meta;\n  index: number;\n  series: FlatSeriesValue | Series | SeriesObject;\n  seriesIndex: number;\n}\n\nexport interface DataEvent {\n  type: 'initial' | 'update';\n  data: Data;\n}\n\nexport interface OptionsChangedEvent<T = Options> {\n  previousOptions: T;\n  currentOptions: T;\n}\n\nexport interface GridDrawEvent\n  extends Omit<\n    DrawEvent,\n    'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex'\n  > {\n  type: 'grid';\n  axis: Axis;\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n}\n\nexport interface GridBackgroundDrawEvent {\n  type: 'gridBackground';\n  group: Svg;\n  element: Svg;\n}\n\nexport interface LabelDrawEvent\n  extends Omit<\n    DrawEvent,\n    'chartRect' | 'axisX' | 'axisY' | 'meta' | 'series' | 'seriesIndex'\n  > {\n  type: 'label';\n  axis: Axis;\n  text: Label;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport type AxesDrawEvent =\n  | GridDrawEvent\n  | GridBackgroundDrawEvent\n  | LabelDrawEvent;\n"
  },
  {
    "path": "src/event/EventEmitter.ts",
    "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nexport type EventListener<T = any> = (data: T) => void;\n\nexport type AllEventsListener<T = any> = (event: string, data: T) => void;\n\nexport class EventEmitter {\n  private readonly listeners = new Map<string, Set<EventListener>>();\n  private readonly allListeners = new Set<AllEventsListener>();\n\n  /**\n   * Add an event handler for a specific event\n   * @param event The event name\n   * @param listener A event handler function\n   */\n  on(event: '*', listener: AllEventsListener): void;\n  on(event: string, listener: EventListener): void;\n  on(event: string, listener: EventListener | AllEventsListener) {\n    const { allListeners, listeners } = this;\n\n    if (event === '*') {\n      allListeners.add(listener);\n    } else {\n      if (!listeners.has(event)) {\n        listeners.set(event, new Set());\n      }\n\n      (listeners.get(event) as Set<EventListener>).add(\n        listener as EventListener\n      );\n    }\n  }\n\n  /**\n   * Remove an event handler of a specific event name or remove all event handlers for a specific event.\n   * @param event The event name where a specific or all handlers should be removed\n   * @param [listener] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.\n   */\n  off(event: '*', listener?: AllEventsListener): void;\n  off(event: string, listener?: EventListener): void;\n  off(event: string, listener?: EventListener | AllEventsListener) {\n    const { allListeners, listeners } = this;\n\n    if (event === '*') {\n      if (listener) {\n        allListeners.delete(listener);\n      } else {\n        allListeners.clear();\n      }\n    } else if (listeners.has(event)) {\n      const eventListeners = listeners.get(event) as Set<EventListener>;\n\n      if (listener) {\n        eventListeners.delete(listener as EventListener);\n      } else {\n        eventListeners.clear();\n      }\n\n      if (!eventListeners.size) {\n        listeners.delete(event);\n      }\n    }\n  }\n\n  /**\n   * Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter.\n   * @param event The event name that should be triggered\n   * @param data Arbitrary data that will be passed to the event handler callback functions\n   */\n  emit<T = any>(event: string, data: T) {\n    const { allListeners, listeners } = this;\n\n    // Only do something if there are event handlers with this name existing\n    if (listeners.has(event)) {\n      (listeners.get(event) as Set<EventListener>).forEach(listener =>\n        listener(data)\n      );\n    }\n\n    // Emit event to star event handlers\n    allListeners.forEach(listener => listener(event, data));\n  }\n}\n"
  },
  {
    "path": "src/event/index.ts",
    "content": "export * from './EventEmitter';\n"
  },
  {
    "path": "src/index.ts",
    "content": "export * from './core';\nexport * from './event';\nexport * from './charts';\nexport * from './axes';\nexport * as Interpolation from './interpolation';\nexport * from './svg';\nexport * from './utils';\n"
  },
  {
    "path": "src/interpolation/cardinal.ts",
    "content": "import type { SegmentData } from '../core';\nimport { splitIntoSegments } from '../core';\nimport { SvgPath } from '../svg';\nimport { none } from './none';\n\nexport interface CardinalInterpolationOptions {\n  tension?: number;\n  fillHoles?: boolean;\n}\n\n/**\n * 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.\n *\n * 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`.\n *\n * 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.\n *\n * @example\n * ```ts\n * const chart = new LineChart('.ct-chart', {\n *   labels: [1, 2, 3, 4, 5],\n *   series: [[1, 2, 8, 1, 7]]\n * }, {\n *   lineSmooth: Interpolation.cardinal({\n *     tension: 1,\n *     fillHoles: false\n *   })\n * });\n * ```\n *\n * @param options The options of the cardinal factory function.\n */\nexport function cardinal(options?: CardinalInterpolationOptions) {\n  const finalOptions = {\n    tension: 1,\n    fillHoles: false,\n    ...options\n  };\n\n  const t = Math.min(1, Math.max(0, finalOptions.tension));\n  const c = 1 - t;\n\n  return function cardinalInterpolation(\n    pathCoordinates: number[],\n    valueData: SegmentData[]\n  ): SvgPath {\n    // First we try to split the coordinates into segments\n    // This is necessary to treat \"holes\" in line charts\n    const segments = splitIntoSegments(pathCoordinates, valueData, {\n      fillHoles: finalOptions.fillHoles\n    });\n\n    if (!segments.length) {\n      // If there were no segments return 'none' interpolation\n      return none()([], []);\n    } else if (segments.length > 1) {\n      // If the split resulted in more that one segment we need to interpolate each segment individually and join them\n      // afterwards together into a single path.\n      // For each segment we will recurse the cardinal function\n      // Join the segment path data into a single path and return\n      return SvgPath.join(\n        segments.map(segment =>\n          cardinalInterpolation(segment.pathCoordinates, segment.valueData)\n        )\n      );\n    } else {\n      // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first\n      // segment\n      pathCoordinates = segments[0].pathCoordinates;\n      valueData = segments[0].valueData;\n\n      // If less than two points we need to fallback to no smoothing\n      if (pathCoordinates.length <= 4) {\n        return none()(pathCoordinates, valueData);\n      }\n\n      const path = new SvgPath().move(\n        pathCoordinates[0],\n        pathCoordinates[1],\n        false,\n        valueData[0]\n      );\n      const z = false;\n\n      for (\n        let i = 0, iLen = pathCoordinates.length;\n        iLen - 2 * Number(!z) > i;\n        i += 2\n      ) {\n        const p = [\n          { x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1] },\n          { x: +pathCoordinates[i], y: +pathCoordinates[i + 1] },\n          { x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3] },\n          { x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5] }\n        ];\n\n        if (z) {\n          if (!i) {\n            p[0] = {\n              x: +pathCoordinates[iLen - 2],\n              y: +pathCoordinates[iLen - 1]\n            };\n          } else if (iLen - 4 === i) {\n            p[3] = { x: +pathCoordinates[0], y: +pathCoordinates[1] };\n          } else if (iLen - 2 === i) {\n            p[2] = { x: +pathCoordinates[0], y: +pathCoordinates[1] };\n            p[3] = { x: +pathCoordinates[2], y: +pathCoordinates[3] };\n          }\n        } else {\n          if (iLen - 4 === i) {\n            p[3] = p[2];\n          } else if (!i) {\n            p[0] = { x: +pathCoordinates[i], y: +pathCoordinates[i + 1] };\n          }\n        }\n\n        path.curve(\n          (t * (-p[0].x + 6 * p[1].x + p[2].x)) / 6 + c * p[2].x,\n          (t * (-p[0].y + 6 * p[1].y + p[2].y)) / 6 + c * p[2].y,\n          (t * (p[1].x + 6 * p[2].x - p[3].x)) / 6 + c * p[2].x,\n          (t * (p[1].y + 6 * p[2].y - p[3].y)) / 6 + c * p[2].y,\n          p[2].x,\n          p[2].y,\n          false,\n          valueData[(i + 2) / 2]\n        );\n      }\n\n      return path;\n    }\n  };\n}\n"
  },
  {
    "path": "src/interpolation/index.ts",
    "content": "export * from './none';\nexport * from './simple';\nexport * from './step';\nexport * from './cardinal';\nexport * from './monotoneCubic';\n"
  },
  {
    "path": "src/interpolation/monotoneCubic.ts",
    "content": "import type { SegmentData } from '../core';\nimport { splitIntoSegments } from '../core';\nimport { SvgPath } from '../svg';\nimport { none } from './none';\n\nexport interface MonotoneCubicInterpolationOptions {\n  fillHoles?: boolean;\n}\n\n/**\n * 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.\n *\n * 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`.\n *\n * 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.\n *\n * All smoothing functions within Chartist are factory functions that accept an options parameter.\n *\n * @example\n * ```ts\n * const chart = new LineChart('.ct-chart', {\n *   labels: [1, 2, 3, 4, 5],\n *   series: [[1, 2, 8, 1, 7]]\n * }, {\n *   lineSmooth: Interpolation.monotoneCubic({\n *     fillHoles: false\n *   })\n * });\n * ```\n *\n * @param options The options of the monotoneCubic factory function.\n */\nexport function monotoneCubic(options?: MonotoneCubicInterpolationOptions) {\n  const finalOptions = {\n    fillHoles: false,\n    ...options\n  };\n\n  return function monotoneCubicInterpolation(\n    pathCoordinates: number[],\n    valueData: SegmentData[]\n  ): SvgPath {\n    // First we try to split the coordinates into segments\n    // This is necessary to treat \"holes\" in line charts\n    const segments = splitIntoSegments(pathCoordinates, valueData, {\n      fillHoles: finalOptions.fillHoles,\n      increasingX: true\n    });\n\n    if (!segments.length) {\n      // If there were no segments return 'Chartist.Interpolation.none'\n      return none()([], []);\n    } else if (segments.length > 1) {\n      // If the split resulted in more that one segment we need to interpolate each segment individually and join them\n      // afterwards together into a single path.\n      // For each segment we will recurse the monotoneCubic fn function\n      // Join the segment path data into a single path and return\n      return SvgPath.join(\n        segments.map(segment =>\n          monotoneCubicInterpolation(segment.pathCoordinates, segment.valueData)\n        )\n      );\n    } else {\n      // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first\n      // segment\n      pathCoordinates = segments[0].pathCoordinates;\n      valueData = segments[0].valueData;\n\n      // If less than three points we need to fallback to no smoothing\n      if (pathCoordinates.length <= 4) {\n        return none()(pathCoordinates, valueData);\n      }\n\n      const xs = [];\n      const ys = [];\n      const n = pathCoordinates.length / 2;\n      const ms = [];\n      const ds = [];\n      const dys = [];\n      const dxs = [];\n\n      // Populate x and y coordinates into separate arrays, for readability\n      for (let i = 0; i < n; i++) {\n        xs[i] = pathCoordinates[i * 2];\n        ys[i] = pathCoordinates[i * 2 + 1];\n      }\n\n      // Calculate deltas and derivative\n      for (let i = 0; i < n - 1; i++) {\n        dys[i] = ys[i + 1] - ys[i];\n        dxs[i] = xs[i + 1] - xs[i];\n        ds[i] = dys[i] / dxs[i];\n      }\n\n      // Determine desired slope (m) at each point using Fritsch-Carlson method\n      // See: http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation\n      ms[0] = ds[0];\n      ms[n - 1] = ds[n - 2];\n\n      for (let i = 1; i < n - 1; i++) {\n        if (ds[i] === 0 || ds[i - 1] === 0 || ds[i - 1] > 0 !== ds[i] > 0) {\n          ms[i] = 0;\n        } else {\n          ms[i] =\n            (3 * (dxs[i - 1] + dxs[i])) /\n            ((2 * dxs[i] + dxs[i - 1]) / ds[i - 1] +\n              (dxs[i] + 2 * dxs[i - 1]) / ds[i]);\n\n          if (!isFinite(ms[i])) {\n            ms[i] = 0;\n          }\n        }\n      }\n\n      // Now build a path from the slopes\n      const path = new SvgPath().move(xs[0], ys[0], false, valueData[0]);\n\n      for (let i = 0; i < n - 1; i++) {\n        path.curve(\n          // First control point\n          xs[i] + dxs[i] / 3,\n          ys[i] + (ms[i] * dxs[i]) / 3,\n          // Second control point\n          xs[i + 1] - dxs[i] / 3,\n          ys[i + 1] - (ms[i + 1] * dxs[i]) / 3,\n          // End point\n          xs[i + 1],\n          ys[i + 1],\n\n          false,\n          valueData[i + 1]\n        );\n      }\n\n      return path;\n    }\n  };\n}\n"
  },
  {
    "path": "src/interpolation/none.ts",
    "content": "import type { SegmentData } from '../core';\nimport { getMultiValue } from '../core';\nimport { SvgPath } from '../svg';\n\nexport interface NoneInterpolationOptions {\n  fillHoles?: boolean;\n}\n\n/**\n * This interpolation function does not smooth the path and the result is only containing lines and no curves.\n *\n * @example\n * ```ts\n * const chart = new LineChart('.ct-chart', {\n *   labels: [1, 2, 3, 4, 5],\n *   series: [[1, 2, 8, 1, 7]]\n * }, {\n *   lineSmooth: Interpolation.none({\n *     fillHoles: false\n *   })\n * });\n * ```\n */\nexport function none(options?: NoneInterpolationOptions) {\n  const finalOptions = {\n    fillHoles: false,\n    ...options\n  };\n\n  return function noneInterpolation(\n    pathCoordinates: number[],\n    valueData: SegmentData[]\n  ) {\n    const path = new SvgPath();\n    let hole = true;\n\n    for (let i = 0; i < pathCoordinates.length; i += 2) {\n      const currX = pathCoordinates[i];\n      const currY = pathCoordinates[i + 1];\n      const currData = valueData[i / 2];\n\n      if (getMultiValue(currData.value) !== undefined) {\n        if (hole) {\n          path.move(currX, currY, false, currData);\n        } else {\n          path.line(currX, currY, false, currData);\n        }\n\n        hole = false;\n      } else if (!finalOptions.fillHoles) {\n        hole = true;\n      }\n    }\n\n    return path;\n  };\n}\n"
  },
  {
    "path": "src/interpolation/simple.ts",
    "content": "import type { SegmentData } from '../core/types';\nimport { SvgPath } from '../svg';\n\nexport interface SimpleInteractionOptions {\n  divisor?: number;\n  fillHoles?: boolean;\n}\n\n/**\n * 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.\n *\n * 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.\n *\n * 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.\n *\n * @example\n * ```ts\n * const chart = new LineChart('.ct-chart', {\n *   labels: [1, 2, 3, 4, 5],\n *   series: [[1, 2, 8, 1, 7]]\n * }, {\n *   lineSmooth: Interpolation.simple({\n *     divisor: 2,\n *     fillHoles: false\n *   })\n * });\n * ```\n *\n * @param options The options of the simple interpolation factory function.\n */\nexport function simple(options?: SimpleInteractionOptions) {\n  const finalOptions = {\n    divisor: 2,\n    fillHoles: false,\n    ...options\n  };\n\n  const d = 1 / Math.max(1, finalOptions.divisor);\n\n  return function simpleInterpolation(\n    pathCoordinates: number[],\n    valueData: SegmentData[]\n  ) {\n    const path = new SvgPath();\n    let prevX = 0;\n    let prevY = 0;\n    let prevData;\n\n    for (let i = 0; i < pathCoordinates.length; i += 2) {\n      const currX = pathCoordinates[i];\n      const currY = pathCoordinates[i + 1];\n      const length = (currX - prevX) * d;\n      const currData = valueData[i / 2];\n\n      if (currData.value !== undefined) {\n        if (prevData === undefined) {\n          path.move(currX, currY, false, currData);\n        } else {\n          path.curve(\n            prevX + length,\n            prevY,\n            currX - length,\n            currY,\n            currX,\n            currY,\n            false,\n            currData\n          );\n        }\n\n        prevX = currX;\n        prevY = currY;\n        prevData = currData;\n      } else if (!finalOptions.fillHoles) {\n        prevX = prevY = 0;\n        prevData = undefined;\n      }\n    }\n\n    return path;\n  };\n}\n"
  },
  {
    "path": "src/interpolation/step.ts",
    "content": "import type { SegmentData } from '../core';\nimport { SvgPath } from '../svg';\n\nexport interface StepInterpolationOptions {\n  postpone?: boolean;\n  fillHoles?: boolean;\n}\n\n/**\n * 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.\n *\n * 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`.\n *\n * @example\n * ```ts\n * const chart = new Chartist.Line('.ct-chart', {\n *   labels: [1, 2, 3, 4, 5],\n *   series: [[1, 2, 8, 1, 7]]\n * }, {\n *   lineSmooth: Interpolation.step({\n *     postpone: true,\n *     fillHoles: false\n *   })\n * });\n * ```\n */\nexport function step(options?: StepInterpolationOptions) {\n  const finalOptions = {\n    postpone: true,\n    fillHoles: false,\n    ...options\n  };\n\n  return function stepInterpolation(\n    pathCoordinates: number[],\n    valueData: SegmentData[]\n  ) {\n    const path = new SvgPath();\n\n    let prevX = 0;\n    let prevY = 0;\n    let prevData;\n\n    for (let i = 0; i < pathCoordinates.length; i += 2) {\n      const currX = pathCoordinates[i];\n      const currY = pathCoordinates[i + 1];\n      const currData = valueData[i / 2];\n\n      // If the current point is also not a hole we can draw the step lines\n      if (currData.value !== undefined) {\n        if (prevData === undefined) {\n          path.move(currX, currY, false, currData);\n        } else {\n          if (finalOptions.postpone) {\n            // If postponed we should draw the step line with the value of the previous value\n            path.line(currX, prevY, false, prevData);\n          } else {\n            // If not postponed we should draw the step line with the value of the current value\n            path.line(prevX, currY, false, currData);\n          }\n          // Line to the actual point (this should only be a Y-Axis movement\n          path.line(currX, currY, false, currData);\n        }\n\n        prevX = currX;\n        prevY = currY;\n        prevData = currData;\n      } else if (!finalOptions.fillHoles) {\n        prevX = prevY = 0;\n        prevData = undefined;\n      }\n    }\n\n    return path;\n  };\n}\n"
  },
  {
    "path": "src/styles/_settings.scss",
    "content": "@use \"sass:math\";\n\n// Scales for responsive SVG containers\n$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;\n$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;\n\n// Class names to be used when generating CSS\n$ct-class-chart: ct-chart !default;\n$ct-class-chart-line: ct-chart-line !default;\n$ct-class-chart-bar: ct-chart-bar !default;\n$ct-class-horizontal-bars: ct-horizontal-bars !default;\n$ct-class-chart-pie: ct-chart-pie !default;\n$ct-class-chart-donut: ct-chart-donut !default;\n$ct-class-label: ct-label !default;\n$ct-class-series: ct-series !default;\n$ct-class-line: ct-line !default;\n$ct-class-point: ct-point !default;\n$ct-class-area: ct-area !default;\n$ct-class-bar: ct-bar !default;\n$ct-class-slice-pie: ct-slice-pie !default;\n$ct-class-slice-donut: ct-slice-donut !default;\n$ct-class-grid: ct-grid !default;\n$ct-class-grid-background: ct-grid-background !default;\n$ct-class-vertical: ct-vertical !default;\n$ct-class-horizontal: ct-horizontal !default;\n$ct-class-start: ct-start !default;\n$ct-class-end: ct-end !default;\n\n// Container ratio\n$ct-container-ratio: math.div(1, 1.618) !default;\n\n// Text styles for labels\n$ct-text-color: rgba(0, 0, 0, 0.4) !default;\n$ct-text-size: 0.75rem !default;\n$ct-text-align: flex-start !default;\n$ct-text-justify: flex-start !default;\n$ct-text-line-height: 1 !default;\n\n// Grid styles\n$ct-grid-color: rgba(0, 0, 0, 0.2) !default;\n$ct-grid-dasharray: 2px !default;\n$ct-grid-width: 1px !default;\n$ct-grid-background-fill: none !default;\n\n// Line chart properties\n$ct-line-width: 4px !default;\n$ct-line-dasharray: false !default;\n$ct-point-size: 10px !default;\n// Line chart point, can be either round or square\n$ct-point-shape: round !default;\n// Area fill transparency between 0 and 1\n$ct-area-opacity: 0.1 !default;\n\n// Bar chart bar width\n$ct-bar-width: 10px !default;\n\n// Donut width (If donut width is to big it can cause issues where the shape gets distorted)\n$ct-donut-width: 60px !default;\n\n// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you\n// should set this property to false\n$ct-include-classes: true !default;\n\n// If this is set to true the CSS will contain colored series. You can extend or change the color with the\n// properties below\n$ct-include-colored-series: $ct-include-classes !default;\n\n// If set to true this will include all responsive container variations using the scales defined at the top of the script\n$ct-include-alternative-responsive-containers: $ct-include-classes !default;\n\n// Series names and colors. This can be extended or customized as desired. Just add more series and colors.\n$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;\n$ct-series-colors: (\n  #d70206,\n  #f05b4f,\n  #f4c63d,\n  #d17905,\n  #453d3f,\n  #59922b,\n  #0544d3,\n  #6b0392,\n  #e6805e,\n  #dda458,\n  #eacf7d,\n  #86797d,\n  #b2c326,\n  #6188e2,\n  #a748ca\n) !default;\n"
  },
  {
    "path": "src/styles/index.scss",
    "content": "@import \"settings\";\n\n@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {\n  display: block;\n  position: relative;\n  width: $width;\n\n  &:before {\n    display: block;\n    float: left;\n    content: \"\";\n    width: 0;\n    height: 0;\n    padding-bottom: $ratio * 100%;\n  }\n\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n\n  > svg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n}\n\n@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {\n  align-items: $ct-text-align;\n  justify-content: $ct-text-justify;\n  // Fallback to text-align for non-flex browsers\n  @if ($ct-text-justify == 'flex-start') {\n    text-align: left;\n  } @else if ($ct-text-justify == 'flex-end') {\n    text-align: right;\n  } @else {\n    text-align: center;\n  }\n}\n\n@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {\n  fill: $ct-text-color;\n  color: $ct-text-color;\n  font-size: $ct-text-size;\n  line-height: $ct-text-line-height;\n}\n\n@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {\n  stroke: $ct-grid-color;\n  stroke-width: $ct-grid-width;\n\n  @if ($ct-grid-dasharray) {\n    stroke-dasharray: $ct-grid-dasharray;\n  }\n}\n\n@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {\n  stroke-width: $ct-point-size;\n  stroke-linecap: $ct-point-shape;\n}\n\n@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {\n  fill: none;\n  stroke-width: $ct-line-width;\n\n  @if ($ct-line-dasharray) {\n    stroke-dasharray: $ct-line-dasharray;\n  }\n}\n\n@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {\n  stroke: none;\n  fill-opacity: $ct-area-opacity;\n}\n\n@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {\n  fill: none;\n  stroke-width: $ct-bar-width;\n}\n\n@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {\n  fill: none;\n  stroke-width: $ct-donut-width;\n}\n\n@mixin ct-chart-series-color($color) {\n  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {\n    stroke: $color;\n  }\n\n  .#{$ct-class-slice-pie}, .#{$ct-class-area} {\n    fill: $color;\n  }\n}\n\n@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) {\n\n  .#{$ct-class-label} {\n    @include ct-chart-label($ct-text-color, $ct-text-size);\n  }\n\n  .#{$ct-class-chart-line} .#{$ct-class-label},\n  .#{$ct-class-chart-bar} .#{$ct-class-label} {\n    display: flex;\n  }\n\n  .#{$ct-class-chart-pie} .#{$ct-class-label},\n  .#{$ct-class-chart-donut} .#{$ct-class-label} {\n    dominant-baseline: central;\n  }\n\n  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {\n    @include ct-align-justify(flex-end, flex-start);\n  }\n\n  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {\n    @include ct-align-justify(flex-start, flex-start);\n  }\n\n  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {\n    @include ct-align-justify(flex-end, flex-end);\n  }\n\n  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {\n    @include ct-align-justify(flex-end, flex-start);\n  }\n\n  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {\n    @include ct-align-justify(flex-end, center);\n  }\n\n  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {\n    @include ct-align-justify(flex-start, center);\n  }\n\n  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {\n    @include ct-align-justify(flex-end, flex-start);\n  }\n\n  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {\n    @include ct-align-justify(flex-start, flex-start);\n  }\n\n  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {\n    @include ct-align-justify(center, flex-end);\n  }\n\n  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {\n    @include ct-align-justify(center, flex-start);\n  }\n\n  .#{$ct-class-grid} {\n    @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);\n  }\n\n  .#{$ct-class-grid-background} {\n    fill: $ct-grid-background-fill;\n  }\n\n  .#{$ct-class-point} {\n    @include ct-chart-point($ct-point-size, $ct-point-shape);\n  }\n\n  .#{$ct-class-line} {\n    @include ct-chart-line($ct-line-width);\n  }\n\n  .#{$ct-class-area} {\n    @include ct-chart-area();\n  }\n\n  .#{$ct-class-bar} {\n    @include ct-chart-bar($ct-bar-width);\n  }\n\n  .#{$ct-class-slice-donut} {\n    @include ct-chart-donut($ct-donut-width);\n  }\n\n  @if $ct-include-colored-series {\n    @for $i from 0 to length($ct-series-names) {\n      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {\n        $color: nth($ct-series-colors, $i + 1);\n\n        @include ct-chart-series-color($color);\n      }\n    }\n  }\n}\n\n@if $ct-include-classes {\n  @include ct-chart();\n\n  @if $ct-include-alternative-responsive-containers {\n    @for $i from 0 to length($ct-scales-names) {\n      .#{nth($ct-scales-names, $i + 1)} {\n        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/svg/Svg.spec.ts",
    "content": "import { Svg } from './Svg';\nimport { namespaces } from '../core';\n\ndescribe('Svg', () => {\n  it('should create a valid svg dom element', () => {\n    const svg = new Svg('svg');\n\n    expect(svg).toBeDefined();\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().nodeName.toLowerCase()).toBe('svg');\n  });\n\n  it('should create a valid svg dom element with attributes', () => {\n    const svg = new Svg('svg', {\n      width: '100%',\n      height: '100%'\n    });\n\n    expect(svg).toBeDefined();\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().nodeName.toLowerCase()).toBe('svg');\n    expect(svg.getNode()).toHaveAttribute('width', '100%');\n    expect(svg.getNode()).toHaveAttribute('height', '100%');\n  });\n\n  it('should create nested objects with attributes', () => {\n    const svg = new Svg('svg');\n    svg.elem('g').elem('g').elem('circle', {\n      cx: 100,\n      cy: 100,\n      r: 10\n    });\n\n    expect(svg.getNode()).toBeDefined();\n    expect(\n      svg.getNode().firstElementChild?.firstElementChild?.firstElementChild\n    ).toBeDefined();\n    expect(\n      svg\n        .getNode()\n        .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute(\n          'cx'\n        )\n    ).toBe('100');\n    expect(\n      svg\n        .getNode()\n        .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute(\n          'cy'\n        )\n    ).toBe('100');\n    expect(\n      svg\n        .getNode()\n        .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute(\n          'r'\n        )\n    ).toBe('10');\n  });\n\n  it('should allow to set attributes manually', () => {\n    const svg = new Svg('svg');\n    svg.elem('circle').attr({\n      cx: 100,\n      cy: 100,\n      r: 10\n    });\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().firstElementChild).toBeDefined();\n    expect(svg.getNode().firstElementChild?.getAttribute('cx')).toBe('100');\n    expect(svg.getNode().firstElementChild?.getAttribute('cy')).toBe('100');\n    expect(svg.getNode().firstElementChild?.getAttribute('r')).toBe('10');\n  });\n\n  it('should allow to set namespaced attributes', () => {\n    const svg = new Svg('image');\n    svg.elem('image').attr({\n      x: 100,\n      y: 100,\n      height: 100,\n      width: 100,\n      'xlink:href': 'image.jpg'\n    });\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().firstElementChild).toBeDefined();\n    expect(svg.getNode().firstElementChild).toHaveAttribute('x', '100');\n    expect(svg.getNode().firstElementChild).toHaveAttribute('y', '100');\n    expect(svg.getNode().firstElementChild).toHaveAttribute('width', '100');\n    expect(svg.getNode().firstElementChild).toHaveAttribute('height', '100');\n    expect(\n      svg.getNode().firstElementChild?.getAttributeNS(namespaces.xlink, 'href')\n    ).toBe('image.jpg');\n  });\n\n  it('should clear on each nesting level', () => {\n    const svg = new Svg('svg');\n    const group = svg.elem('g');\n    group.elem('circle');\n    group.elem('circle');\n    group.elem('circle');\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().firstElementChild?.childNodes.length).toBe(3);\n\n    group.empty();\n    expect(svg.getNode().firstElementChild?.childNodes.length).toBe(0);\n\n    svg.empty();\n    expect(svg.getNode()).toBeEmptyDOMElement();\n  });\n\n  it('should allow to remove a certain element', () => {\n    const svg = new Svg('svg');\n    const text = svg.elem('text');\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().childNodes.length).toBe(1);\n    expect(svg.getNode().firstElementChild?.nodeName.toLowerCase()).toBe(\n      'text'\n    );\n\n    text.remove();\n    expect(svg.getNode().childNodes.length).toBe(0);\n  });\n\n  it('should allow to write text content into elements', () => {\n    const svg = new Svg('svg');\n    svg.elem('text').text('Hello World');\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().childNodes.length).toBe(1);\n    expect(svg.getNode().firstElementChild?.nodeName.toLowerCase()).toBe(\n      'text'\n    );\n    expect(svg.getNode().firstElementChild?.firstChild?.nodeType).toBe(3);\n    expect(svg.getNode().firstElementChild?.firstChild).toHaveTextContent(\n      'Hello World'\n    );\n  });\n\n  it('should allow to add and remove classes on elements', () => {\n    const svg = new Svg('svg')\n      .addClass('test-class-1')\n      .addClass('test-class-2')\n      // Should not allow duplicates\n      .addClass('test-class-2')\n      // Should allow multiple classes with white spaces\n      .addClass('test-class-3      test-class-4');\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode().getAttribute('class')?.split(' ')).toEqual([\n      'test-class-1',\n      'test-class-2',\n      'test-class-3',\n      'test-class-4'\n    ]);\n\n    svg.removeClass('test-class-1');\n    // Should allow multiple classes with whitespaces\n    svg.removeClass('test-class-2        test-class-3');\n\n    expect(svg.getNode()).toHaveAttribute('class', 'test-class-4');\n  });\n\n  it('should allow to travers up in the fluent API chain and set attributes on the way', () => {\n    const svg = new Svg('svg');\n    svg\n      .elem('g')\n      .elem('g')\n      .elem('g')\n      .elem('circle')\n      .parent()\n      ?.attr({\n        transform: 'rotate(10 10 10)'\n      })\n      .parent()\n      ?.attr({\n        transform: 'rotate(20 20 20)'\n      })\n      .parent()\n      ?.attr({\n        transform: 'rotate(30 30 30)'\n      })\n      .parent()\n      ?.attr({\n        width: '100%',\n        height: '100%'\n      });\n\n    expect(svg.getNode()).toBeDefined();\n    expect(svg.getNode()).toHaveAttribute('width', '100%');\n    expect(svg.getNode()).toHaveAttribute('height', '100%');\n\n    expect(svg.getNode().firstElementChild).toBeDefined();\n    expect(svg.getNode().firstElementChild?.getAttribute('transform')).toBe(\n      'rotate(30 30 30)'\n    );\n\n    expect(svg.getNode().firstElementChild?.firstElementChild).toBeDefined();\n    expect(\n      svg\n        .getNode()\n        .firstElementChild?.firstElementChild?.getAttribute('transform')\n    ).toBe('rotate(20 20 20)');\n\n    expect(\n      svg.getNode().firstElementChild?.firstElementChild?.firstElementChild\n    ).toBeDefined();\n    expect(\n      svg\n        .getNode()\n        .firstElementChild?.firstElementChild?.firstElementChild?.getAttribute(\n          'transform'\n        )\n    ).toBe('rotate(10 10 10)');\n  });\n});\n"
  },
  {
    "path": "src/svg/Svg.ts",
    "content": "import type { EventEmitter } from '../event';\nimport { namespaces } from '../core/constants';\nimport type { Attributes, AnimationDefinition } from './types';\nimport { SvgList } from './SvgList';\nimport { createAnimation, easings } from './animation';\n\n/**\n * Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.\n */\nexport class Svg {\n  /**\n   * @todo Only there for chartist <1 compatibility. Remove after deprecation warining.\n   * @deprecated Use the animation module export `easings` directly.\n   */\n  static readonly Easing = easings;\n\n  private _node: Element;\n\n  /**\n   * @param name The name of the SVG element to create or an SVG dom element which should be wrapped into Svg\n   * @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.\n   * @param className This class or class list will be added to the SVG element\n   * @param parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child\n   * @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\n   */\n  constructor(\n    name: string | Element,\n    attributes?: Attributes,\n    className?: string,\n    parent?: Svg,\n    insertFirst = false\n  ) {\n    // If Svg is getting called with an SVG element we just return the wrapper\n    if (name instanceof Element) {\n      this._node = name;\n    } else {\n      this._node = document.createElementNS(namespaces.svg, name);\n\n      // If this is an SVG element created then custom namespace\n      if (name === 'svg') {\n        this.attr({\n          'xmlns:ct': namespaces.ct\n        });\n      }\n    }\n\n    if (attributes) {\n      this.attr(attributes);\n    }\n\n    if (className) {\n      this.addClass(className);\n    }\n\n    if (parent) {\n      if (insertFirst && parent._node.firstChild) {\n        parent._node.insertBefore(this._node, parent._node.firstChild);\n      } else {\n        parent._node.appendChild(this._node);\n      }\n    }\n  }\n\n  /**\n   * Set attributes on the current SVG element of the wrapper you're currently working on.\n   * @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.\n   * @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.\n   * @return The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.\n   */\n  attr(attributes: string, ns?: string): string | null;\n  attr(attributes: Attributes): this;\n  attr(attributes: string | Attributes, ns?: string) {\n    if (typeof attributes === 'string') {\n      if (ns) {\n        return this._node.getAttributeNS(ns, attributes);\n      } else {\n        return this._node.getAttribute(attributes);\n      }\n    }\n\n    Object.keys(attributes).forEach(key => {\n      // If the attribute value is undefined we can skip this one\n      if (attributes[key] === undefined) {\n        return;\n      }\n\n      if (key.indexOf(':') !== -1) {\n        const namespacedAttribute = key.split(':');\n        this._node.setAttributeNS(\n          namespaces[namespacedAttribute[0]],\n          key,\n          String(attributes[key])\n        );\n      } else {\n        this._node.setAttribute(key, String(attributes[key]));\n      }\n    });\n\n    return this;\n  }\n\n  /**\n   * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.\n   * @param name The name of the SVG element that should be created as child element of the currently selected element wrapper\n   * @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.\n   * @param className This class or class list will be added to the SVG element\n   * @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\n   * @return Returns a Svg wrapper object that can be used to modify the containing SVG data\n   */\n  elem(\n    name: string,\n    attributes?: Attributes,\n    className?: string,\n    insertFirst = false\n  ) {\n    return new Svg(name, attributes, className, this, insertFirst);\n  }\n\n  /**\n   * Returns the parent Chartist.SVG wrapper object\n   * @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.\n   */\n  parent() {\n    return this._node.parentNode instanceof SVGElement\n      ? new Svg(this._node.parentNode)\n      : null;\n  }\n\n  /**\n   * This method returns a Svg wrapper around the root SVG element of the current tree.\n   * @return The root SVG element wrapped in a Svg element\n   */\n  root() {\n    let node = this._node;\n\n    while (node.nodeName !== 'svg') {\n      if (node.parentElement) {\n        node = node.parentElement;\n      } else {\n        break;\n      }\n    }\n\n    return new Svg(node);\n  }\n\n  /**\n   * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Svg wrapper.\n   * @param selector A CSS selector that is used to query for child SVG elements\n   * @return The SVG wrapper for the element found or null if no element was found\n   */\n  querySelector(selector: string) {\n    const foundNode = this._node.querySelector(selector);\n    return foundNode ? new Svg(foundNode) : null;\n  }\n\n  /**\n   * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Svg.List wrapper.\n   * @param selector A CSS selector that is used to query for child SVG elements\n   * @return The SVG wrapper list for the element found or null if no element was found\n   */\n  querySelectorAll(selector: string) {\n    const foundNodes = this._node.querySelectorAll(selector);\n    return new SvgList(foundNodes);\n  }\n\n  /**\n   * Returns the underlying SVG node for the current element.\n   */\n  getNode<T extends Element = Element>() {\n    return this._node as T;\n  }\n\n  /**\n   * 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.\n   * @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\n   * @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.\n   * @param className This class or class list will be added to the SVG element\n   * @param insertFirst Specifies if the foreignObject should be inserted as first child\n   * @return New wrapper object that wraps the foreignObject element\n   */\n  foreignObject(\n    content: string | Node,\n    attributes?: Attributes,\n    className?: string,\n    insertFirst = false\n  ) {\n    let contentNode: Node;\n    // If content is string then we convert it to DOM\n    // TODO: Handle case where content is not a string nor a DOM Node\n    if (typeof content === 'string') {\n      const container = document.createElement('div');\n      container.innerHTML = content;\n      contentNode = container.firstChild as Node;\n    } else {\n      contentNode = content;\n    }\n\n    if (contentNode instanceof Element) {\n      // Adding namespace to content element\n      contentNode.setAttribute('xmlns', namespaces.xmlns);\n    }\n\n    // Creating the foreignObject without required extension attribute (as described here\n    // http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement)\n    const fnObj = this.elem(\n      'foreignObject',\n      attributes,\n      className,\n      insertFirst\n    );\n\n    // Add content to foreignObjectElement\n    fnObj._node.appendChild(contentNode);\n\n    return fnObj;\n  }\n\n  /**\n   * This method adds a new text element to the current Svg wrapper.\n   * @param t The text that should be added to the text element that is created\n   * @return The same wrapper object that was used to add the newly created element\n   */\n  text(t: string) {\n    this._node.appendChild(document.createTextNode(t));\n    return this;\n  }\n\n  /**\n   * This method will clear all child nodes of the current wrapper object.\n   * @return The same wrapper object that got emptied\n   */\n  empty() {\n    while (this._node.firstChild) {\n      this._node.removeChild(this._node.firstChild);\n    }\n\n    return this;\n  }\n\n  /**\n   * 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.\n   * @return The parent wrapper object of the element that got removed\n   */\n  remove() {\n    this._node.parentNode?.removeChild(this._node);\n    return this.parent();\n  }\n\n  /**\n   * This method will replace the element with a new element that can be created outside of the current DOM.\n   * @param newElement The new Svg object that will be used to replace the current wrapper object\n   * @return The wrapper of the new element\n   */\n  replace(newElement: Svg) {\n    this._node.parentNode?.replaceChild(newElement._node, this._node);\n    return newElement;\n  }\n\n  /**\n   * This method will append an element to the current element as a child.\n   * @param element The Svg element that should be added as a child\n   * @param insertFirst Specifies if the element should be inserted as first child\n   * @return The wrapper of the appended object\n   */\n  append(element: Svg, insertFirst = false) {\n    if (insertFirst && this._node.firstChild) {\n      this._node.insertBefore(element._node, this._node.firstChild);\n    } else {\n      this._node.appendChild(element._node);\n    }\n\n    return this;\n  }\n\n  /**\n   * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.\n   * @return A list of classes or an empty array if there are no classes on the current element\n   */\n  classes() {\n    const classNames = this._node.getAttribute('class');\n\n    return classNames ? classNames.trim().split(/\\s+/) : [];\n  }\n\n  /**\n   * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.\n   * @param names A white space separated list of class names\n   * @return The wrapper of the current element\n   */\n  addClass(names: string) {\n    this._node.setAttribute(\n      'class',\n      this.classes()\n        .concat(names.trim().split(/\\s+/))\n        .filter(function (elem, pos, self) {\n          return self.indexOf(elem) === pos;\n        })\n        .join(' ')\n    );\n\n    return this;\n  }\n\n  /**\n   * Removes one or a space separated list of classes from the current element.\n   * @param names A white space separated list of class names\n   * @return The wrapper of the current element\n   */\n  removeClass(names: string) {\n    const removedClasses = names.trim().split(/\\s+/);\n\n    this._node.setAttribute(\n      'class',\n      this.classes()\n        .filter(name => removedClasses.indexOf(name) === -1)\n        .join(' ')\n    );\n\n    return this;\n  }\n\n  /**\n   * Removes all classes from the current element.\n   * @return The wrapper of the current element\n   */\n  removeAllClasses() {\n    this._node.setAttribute('class', '');\n    return this;\n  }\n\n  /**\n   * Get element height using `clientHeight`\n   * @return The elements height in pixels\n   */\n  height() {\n    return this._node.clientHeight;\n  }\n\n  /**\n   * Get element width using `clientWidth`\n   * @return The elements width in pixels\n   */\n  width() {\n    return this._node.clientWidth;\n  }\n\n  /**\n   * 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.\n   * **An animations object could look like this:**\n   * ```javascript\n   * element.animate({\n   *   opacity: {\n   *     dur: 1000,\n   *     from: 0,\n   *     to: 1\n   *   },\n   *   x1: {\n   *     dur: '1000ms',\n   *     from: 100,\n   *     to: 200,\n   *     easing: 'easeOutQuart'\n   *   },\n   *   y1: {\n   *     dur: '2s',\n   *     from: 0,\n   *     to: 100\n   *   }\n   * });\n   * ```\n   * **Automatic unit conversion**\n   * 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.\n   * **Guided mode**\n   * 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.\n   * If guided mode is enabled the following behavior is added:\n   * - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation\n   * - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation)\n   * - The animate element will be forced to use `fill=\"freeze\"`\n   * - 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.\n   * - After the animation the element attribute value will be set to the `to` value of the animation\n   * - The animate element is deleted from the DOM\n   * @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.\n   * @param guided Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated.\n   * @param eventEmitter If specified, this event emitter will be notified when an animation starts or ends.\n   * @return The current element where the animation was added\n   */\n  animate(\n    animations: Record<string, AnimationDefinition | AnimationDefinition[]>,\n    guided = true,\n    eventEmitter?: EventEmitter\n  ) {\n    Object.keys(animations).forEach(attribute => {\n      const attributeAnimation = animations[attribute];\n\n      // If current attribute is an array of definition objects we create an animate for each and disable guided mode\n      if (Array.isArray(attributeAnimation)) {\n        attributeAnimation.forEach(animationDefinition =>\n          createAnimation(\n            this,\n            attribute,\n            animationDefinition,\n            false,\n            eventEmitter\n          )\n        );\n      } else {\n        createAnimation(\n          this,\n          attribute,\n          attributeAnimation,\n          guided,\n          eventEmitter\n        );\n      }\n    });\n\n    return this;\n  }\n}\n"
  },
  {
    "path": "src/svg/SvgList.ts",
    "content": "import { Svg } from './Svg';\n\ntype SvgMethods = Exclude<\n  keyof Svg,\n  | 'constructor'\n  | 'parent'\n  | 'querySelector'\n  | 'querySelectorAll'\n  | 'replace'\n  | 'append'\n  | 'classes'\n  | 'height'\n  | 'width'\n>;\n\ntype SvgListMethods = {\n  [method in SvgMethods]: (...args: Parameters<Svg[method]>) => SvgList;\n};\n\n/**\n * 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.\n * An instance of this class is also returned by `Svg.querySelectorAll`.\n */\nexport class SvgList implements SvgListMethods {\n  private svgElements: Svg[] = [];\n\n  /**\n   * @param nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)\n   */\n  constructor(nodeList: ArrayLike<Element>) {\n    for (let i = 0; i < nodeList.length; i++) {\n      this.svgElements.push(new Svg(nodeList[i]));\n    }\n  }\n\n  private call<T extends SvgMethods>(method: T, args: Parameters<Svg[T]>) {\n    this.svgElements.forEach(element =>\n      Reflect.apply(element[method], element, args)\n    );\n    return this;\n  }\n\n  attr(...args: Parameters<Svg['attr']>) {\n    return this.call('attr', args);\n  }\n\n  elem(...args: Parameters<Svg['elem']>) {\n    return this.call('elem', args);\n  }\n\n  root(...args: Parameters<Svg['root']>) {\n    return this.call('root', args);\n  }\n\n  getNode(...args: Parameters<Svg['getNode']>) {\n    return this.call('getNode', args);\n  }\n\n  foreignObject(...args: Parameters<Svg['foreignObject']>) {\n    return this.call('foreignObject', args);\n  }\n\n  text(...args: Parameters<Svg['text']>) {\n    return this.call('text', args);\n  }\n\n  empty(...args: Parameters<Svg['empty']>) {\n    return this.call('empty', args);\n  }\n\n  remove(...args: Parameters<Svg['remove']>) {\n    return this.call('remove', args);\n  }\n\n  addClass(...args: Parameters<Svg['addClass']>) {\n    return this.call('addClass', args);\n  }\n\n  removeClass(...args: Parameters<Svg['removeClass']>) {\n    return this.call('removeClass', args);\n  }\n\n  removeAllClasses(...args: Parameters<Svg['removeAllClasses']>) {\n    return this.call('removeAllClasses', args);\n  }\n\n  animate(...args: Parameters<Svg['animate']>) {\n    return this.call('animate', args);\n  }\n}\n"
  },
  {
    "path": "src/svg/SvgPath.spec.ts",
    "content": "import { SvgPath } from './SvgPath';\n\ndescribe('Svg', () => {\n  describe('SvgPath', () => {\n    it('should handle position updates correctly', () => {\n      const path: any = new SvgPath();\n      expect(path.position()).toBe(0);\n      expect(path.position(100).position()).toBe(0);\n      expect(path.position(-1).position()).toBe(0);\n\n      path.pathElements = [1, 2, 3];\n      expect(path.position(100).position()).toBe(3);\n    });\n\n    it('should add absolute and relative path elements correctly', () => {\n      const path: any = new SvgPath()\n        .move(1, 2)\n        .move(3, 4, true)\n        .line(5, 6)\n        .line(7, 8, true)\n        .curve(9, 10, 11, 12, 13, 14)\n        .curve(15, 16, 17, 18, 19, 20, true);\n\n      expect(path.pathElements.length).toBe(6);\n      expect(path.pathElements).toEqual([\n        { command: 'M', x: 1, y: 2 },\n        { command: 'm', x: 3, y: 4 },\n        { command: 'L', x: 5, y: 6 },\n        { command: 'l', x: 7, y: 8 },\n        { command: 'C', x1: 9, y1: 10, x2: 11, y2: 12, x: 13, y: 14 },\n        { command: 'c', x1: 15, y1: 16, x2: 17, y2: 18, x: 19, y: 20 }\n      ]);\n    });\n\n    it('should insert new elements at correct position', () => {\n      const path: any = new SvgPath()\n        .move(1, 2)\n        .move(7, 8)\n        .move(9, 10)\n        .position(1)\n        .move(3, 4)\n        .move(5, 6)\n        .position(100000)\n        .move(11, 12)\n        .position(-100000)\n        .move(-1, 0);\n\n      expect(path.pathElements.length).toBe(7);\n      expect(path.pathElements).toEqual([\n        { command: 'M', x: -1, y: 0 },\n        { command: 'M', x: 1, y: 2 },\n        { command: 'M', x: 3, y: 4 },\n        { command: 'M', x: 5, y: 6 },\n        { command: 'M', x: 7, y: 8 },\n        { command: 'M', x: 9, y: 10 },\n        { command: 'M', x: 11, y: 12 }\n      ]);\n    });\n\n    it('should stringify simple shape correctly', () => {\n      const path = new SvgPath(true)\n        .move(10, 10)\n        .line(10, 100)\n        .line(100, 100)\n        .line(100, 10);\n      expect(path.stringify()).toEqual('M10,10L10,100L100,100L100,10Z');\n    });\n\n    it('should stringify with configured precision', () => {\n      const path = new SvgPath(false, {\n        accuracy: 2\n      })\n        .move(10.12345, 10.14345)\n        .line(10.14545, 10)\n        .line(10.14000000645, 10.3333333333);\n      expect(path.stringify()).toEqual('M10.12,10.14L10.15,10L10.14,10.33');\n    });\n\n    it('should parse Chartist SVG path style correctly', () => {\n      const path = new SvgPath().parse('M10,10L10,100L100,100L100,10');\n      expect(path.stringify()).toEqual('M10,10L10,100L100,100L100,10');\n    });\n\n    it('should parse MDN SVG path style correctly', () => {\n      const path = new SvgPath().parse(\n        'M10 10 L 10 100 L 100 100 L 100 10 C 1 1, 1 1, 1 1'\n      );\n      expect(path.stringify()).toEqual(\n        'M10,10L10,100L100,100L100,10C1,1,1,1,1,1'\n      );\n    });\n\n    it('should parse path with closing command', () => {\n      const path = new SvgPath().parse(\n        'M10 10 L 10 100 L 100 100 L 100 10 C 1 1, 1 1, 1 1 Z'\n      );\n      expect(path.stringify()).toEqual(\n        'M10,10L10,100L100,100L100,10C1,1,1,1,1,1'\n      );\n    });\n\n    it('should parse complex path correctly', () => {\n      const path = new SvgPath(false, {\n        accuracy: 0\n      }).parse(\n        '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'\n      );\n      expect(path.stringify()).toEqual(\n        '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'\n      );\n    });\n\n    it('should scale path along both axes', () => {\n      const path: any = new SvgPath()\n        .move(1, 2)\n        .line(3, 4)\n        .curve(5, 6, 7, 8, 9, 10)\n        .scale(10, 100);\n\n      expect(path.pathElements).toEqual([\n        { command: 'M', x: 10, y: 200 },\n        { command: 'L', x: 30, y: 400 },\n        { command: 'C', x1: 50, y1: 600, x2: 70, y2: 800, x: 90, y: 1000 }\n      ]);\n    });\n\n    it('should translate path along both axes', () => {\n      const path: any = new SvgPath()\n        .move(1, 2)\n        .line(3, 4)\n        .curve(5, 6, 7, 8, 9, 10)\n        .translate(10, 100);\n\n      expect(path.pathElements).toEqual([\n        { command: 'M', x: 11, y: 102 },\n        { command: 'L', x: 13, y: 104 },\n        { command: 'C', x1: 15, y1: 106, x2: 17, y2: 108, x: 19, y: 110 }\n      ]);\n    });\n\n    it('should transform path correctly with custom function', () => {\n      const path: any = new SvgPath()\n        .move(1, 2)\n        .line(3, 4)\n        .curve(5, 6, 7, 8, 9, 10)\n        .transform((_element, paramName, _elementIndex, paramIndex) => {\n          if (paramIndex > 3) {\n            return 0;\n          } else if (String(paramName)[0] === 'y') {\n            return 100;\n          }\n\n          return undefined;\n        });\n\n      expect(path.pathElements).toEqual([\n        { command: 'M', x: 1, y: 100 },\n        { command: 'L', x: 3, y: 100 },\n        { command: 'C', x1: 5, y1: 100, x2: 7, y2: 100, x: 0, y: 0 }\n      ]);\n    });\n\n    it('should split correctly by move command', () => {\n      const paths: any = new SvgPath()\n        .parse('M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0')\n        .splitByCommand('M');\n      expect(paths.length).toBe(2);\n      expect(paths[0].pathElements[0].command).toBe('M');\n      expect(paths[0].pathElements.length).toBe(4);\n      expect(paths[1].pathElements[0].command).toBe('M');\n      expect(paths[1].pathElements.length).toBe(4);\n    });\n\n    it('should split correctly by move command and tailing move element', () => {\n      const paths: any = new SvgPath()\n        .parse('M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0M0,0')\n        .splitByCommand('M');\n      expect(paths.length).toBe(3);\n      expect(paths[2].pathElements[0].command).toBe('M');\n    });\n\n    it('should split correctly by move command and leading other commands', () => {\n      const paths: any = new SvgPath()\n        .parse('L0,0C0,0,0,0,0,0M0,0L0,0L0,0L0,0M0,0L0,0L0,0L0,0')\n        .splitByCommand('M');\n      expect(paths.length).toBe(3);\n      expect(paths[0].pathElements.length).toBe(2);\n      expect(paths[0].pathElements[0].command).toBe('L');\n      expect(paths[0].pathElements[1].command).toBe('C');\n\n      expect(paths[1].pathElements.length).toBe(4);\n      expect(paths[1].pathElements[0].command).toBe('M');\n    });\n\n    it('should correctly parse negative values', () => {\n      const paths: any = new SvgPath().parse('M-10,10L-100,-100');\n      expect(paths.pathElements.length).toBe(2);\n      expect(paths.pathElements[0].command).toBe('M');\n      expect(paths.pathElements[1].command).toBe('L');\n\n      expect(paths.pathElements[0].x).toBe(-10);\n      expect(paths.pathElements[0].y).toBe(10);\n      expect(paths.pathElements[1].x).toBe(-100);\n      expect(paths.pathElements[1].y).toBe(-100);\n    });\n  });\n});\n"
  },
  {
    "path": "src/svg/SvgPath.ts",
    "content": "import type { SegmentData } from '../core';\nimport type { SvgPathOptions, PathCommand, PathParams } from './types';\n\n/**\n * Contains the descriptors of supported element types in a SVG path. Currently only move, line and curve are supported.\n */\nconst elementDescriptions: Record<string, string[]> = {\n  m: ['x', 'y'],\n  l: ['x', 'y'],\n  c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],\n  a: ['rx', 'ry', 'xAr', 'lAf', 'sf', 'x', 'y']\n};\n\n/**\n * Default options for newly created SVG path objects.\n */\nconst defaultOptions = {\n  // 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.\n  accuracy: 3\n};\n\nfunction element(\n  command: string,\n  params: PathParams,\n  pathElements: PathCommand[],\n  pos: number,\n  relative: boolean,\n  data?: SegmentData\n) {\n  const pathElement: PathCommand = {\n    command: relative ? command.toLowerCase() : command.toUpperCase(),\n    ...params,\n    ...(data ? { data } : {})\n  };\n\n  pathElements.splice(pos, 0, pathElement);\n}\n\nfunction forEachParam<T extends PathParams = PathParams>(\n  pathElements: PathCommand<T>[],\n  cb: (\n    cmd: PathCommand<T>,\n    param: keyof T,\n    cmdIndex: number,\n    paramIndex: number,\n    cmds: PathCommand<T>[]\n  ) => void\n) {\n  pathElements.forEach((pathElement, pathElementIndex) => {\n    elementDescriptions[pathElement.command.toLowerCase()].forEach(\n      (paramName, paramIndex) => {\n        cb(\n          pathElement,\n          paramName as keyof PathParams,\n          pathElementIndex,\n          paramIndex,\n          pathElements\n        );\n      }\n    );\n  });\n}\n\nexport class SvgPath {\n  /**\n   * This static function on `SvgPath` is joining multiple paths together into one paths.\n   * @param paths A list of paths to be joined together. The order is important.\n   * @param close If the newly created path should be a closed path\n   * @param options Path options for the newly created path.\n   */\n  static join(paths: SvgPath[], close = false, options?: SvgPathOptions) {\n    const joinedPath = new SvgPath(close, options);\n    for (let i = 0; i < paths.length; i++) {\n      const path = paths[i];\n      for (let j = 0; j < path.pathElements.length; j++) {\n        joinedPath.pathElements.push(path.pathElements[j]);\n      }\n    }\n    return joinedPath;\n  }\n\n  pathElements: PathCommand[] = [];\n  private pos = 0;\n  private options: Required<SvgPathOptions>;\n\n  /**\n   * Used to construct a new path object.\n   * @param close If set to true then this path will be closed when stringified (with a Z at the end)\n   * @param options Options object that overrides the default objects. See default options for more details.\n   */\n  constructor(private readonly close = false, options?: SvgPathOptions) {\n    this.options = { ...defaultOptions, ...options };\n  }\n\n  /**\n   * 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.\n   * @param pos If a number is passed then the cursor is set to this position in the path element array.\n   * @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.\n   */\n  position(pos: number): this;\n  position(): number;\n  position(pos?: number) {\n    if (pos !== undefined) {\n      this.pos = Math.max(0, Math.min(this.pathElements.length, pos));\n      return this;\n    } else {\n      return this.pos;\n    }\n  }\n\n  /**\n   * Removes elements from the path starting at the current position.\n   * @param count Number of path elements that should be removed from the current position.\n   * @return The current path object for easy call chaining.\n   */\n  remove(count: number) {\n    this.pathElements.splice(this.pos, count);\n    return this;\n  }\n\n  /**\n   * Use this function to add a new move SVG path element.\n   * @param x The x coordinate for the move element.\n   * @param y The y coordinate for the move element.\n   * @param relative If set to true the move element will be created with relative coordinates (lowercase letter)\n   * @param data Any data that should be stored with the element object that will be accessible in pathElement\n   * @return The current path object for easy call chaining.\n   */\n  move(x: number, y: number, relative = false, data?: SegmentData) {\n    element(\n      'M',\n      {\n        x: +x,\n        y: +y\n      },\n      this.pathElements,\n      this.pos++,\n      relative,\n      data\n    );\n    return this;\n  }\n\n  /**\n   * Use this function to add a new line SVG path element.\n   * @param x The x coordinate for the line element.\n   * @param y The y coordinate for the line element.\n   * @param relative If set to true the line element will be created with relative coordinates (lowercase letter)\n   * @param data Any data that should be stored with the element object that will be accessible in pathElement\n   * @return The current path object for easy call chaining.\n   */\n  line(x: number, y: number, relative = false, data?: SegmentData) {\n    element(\n      'L',\n      {\n        x: +x,\n        y: +y\n      },\n      this.pathElements,\n      this.pos++,\n      relative,\n      data\n    );\n    return this;\n  }\n\n  /**\n   * Use this function to add a new curve SVG path element.\n   * @param x1 The x coordinate for the first control point of the bezier curve.\n   * @param y1 The y coordinate for the first control point of the bezier curve.\n   * @param x2 The x coordinate for the second control point of the bezier curve.\n   * @param y2 The y coordinate for the second control point of the bezier curve.\n   * @param x The x coordinate for the target point of the curve element.\n   * @param y The y coordinate for the target point of the curve element.\n   * @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)\n   * @param data Any data that should be stored with the element object that will be accessible in pathElement\n   * @return The current path object for easy call chaining.\n   */\n  curve(\n    x1: number,\n    y1: number,\n    x2: number,\n    y2: number,\n    x: number,\n    y: number,\n    relative = false,\n    data?: SegmentData\n  ) {\n    element(\n      'C',\n      {\n        x1: +x1,\n        y1: +y1,\n        x2: +x2,\n        y2: +y2,\n        x: +x,\n        y: +y\n      },\n      this.pathElements,\n      this.pos++,\n      relative,\n      data\n    );\n    return this;\n  }\n\n  /**\n   * Use this function to add a new non-bezier curve SVG path element.\n   * @param rx The radius to be used for the x-axis of the arc.\n   * @param ry The radius to be used for the y-axis of the arc.\n   * @param xAr Defines the orientation of the arc\n   * @param lAf Large arc flag\n   * @param sf Sweep flag\n   * @param x The x coordinate for the target point of the curve element.\n   * @param y The y coordinate for the target point of the curve element.\n   * @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)\n   * @param data Any data that should be stored with the element object that will be accessible in pathElement\n   * @return The current path object for easy call chaining.\n   */\n  arc(\n    rx: number,\n    ry: number,\n    xAr: number,\n    lAf: number,\n    sf: number,\n    x: number,\n    y: number,\n    relative = false,\n    data?: SegmentData\n  ) {\n    element(\n      'A',\n      {\n        rx,\n        ry,\n        xAr,\n        lAf,\n        sf,\n        x,\n        y\n      },\n      this.pathElements,\n      this.pos++,\n      relative,\n      data\n    );\n    return this;\n  }\n\n  /**\n   * 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.\n   * @param path Any SVG path that contains move (m), line (l) or curve (c) components.\n   * @return The current path object for easy call chaining.\n   */\n  parse(path: string) {\n    // Parsing the SVG path string into an array of arrays [['M', '10', '10'], ['L', '100', '100']]\n    const chunks = path\n      .replace(/([A-Za-z])(-?[0-9])/g, '$1 $2')\n      .replace(/([0-9])([A-Za-z])/g, '$1 $2')\n      .split(/[\\s,]+/)\n      .reduce<string[][]>((result, pathElement) => {\n        if (pathElement.match(/[A-Za-z]/)) {\n          result.push([]);\n        }\n\n        result[result.length - 1].push(pathElement);\n        return result;\n      }, []);\n\n    // If this is a closed path we remove the Z at the end because this is determined by the close option\n    if (chunks[chunks.length - 1][0].toUpperCase() === 'Z') {\n      chunks.pop();\n    }\n\n    // Using svgPathElementDescriptions to map raw path arrays into objects that contain the command and the parameters\n    // For example {command: 'M', x: '10', y: '10'}\n    const elements = chunks.map(chunk => {\n      const command = chunk.shift() as string;\n      const description = elementDescriptions[command.toLowerCase()];\n\n      return {\n        command,\n        ...description.reduce<Record<string, number>>(\n          (result, paramName, index) => {\n            result[paramName] = +chunk[index];\n            return result;\n          },\n          {}\n        )\n      } as PathCommand;\n    });\n\n    // Preparing a splice call with the elements array as var arg params and insert the parsed elements at the current position\n    this.pathElements.splice(this.pos, 0, ...elements);\n    // Increase the internal position by the element count\n    this.pos += elements.length;\n\n    return this;\n  }\n\n  /**\n   * 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.\n   */\n  stringify() {\n    const accuracyMultiplier = Math.pow(10, this.options.accuracy);\n\n    return (\n      this.pathElements.reduce((path, pathElement) => {\n        const params = elementDescriptions[\n          pathElement.command.toLowerCase()\n        ].map(paramName => {\n          const value = pathElement[paramName as keyof PathCommand] as number;\n\n          return this.options.accuracy\n            ? Math.round(value * accuracyMultiplier) / accuracyMultiplier\n            : value;\n        });\n\n        return path + pathElement.command + params.join(',');\n      }, '') + (this.close ? 'Z' : '')\n    );\n  }\n\n  /**\n   * 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.\n   * @param x The number which will be used to scale the x, x1 and x2 of all path elements.\n   * @param y The number which will be used to scale the y, y1 and y2 of all path elements.\n   * @return The current path object for easy call chaining.\n   */\n  scale(x: number, y: number) {\n    forEachParam(this.pathElements, (pathElement, paramName) => {\n      pathElement[paramName] *= paramName[0] === 'x' ? x : y;\n    });\n    return this;\n  }\n\n  /**\n   * 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.\n   * @param x The number which will be used to translate the x, x1 and x2 of all path elements.\n   * @param y The number which will be used to translate the y, y1 and y2 of all path elements.\n   * @return The current path object for easy call chaining.\n   */\n  translate(x: number, y: number) {\n    forEachParam(this.pathElements, (pathElement, paramName) => {\n      pathElement[paramName] += paramName[0] === 'x' ? x : y;\n    });\n    return this;\n  }\n\n  /**\n   * 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.\n   * The method signature of the callback function looks like this:\n   * ```javascript\n   * function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)\n   * ```\n   * 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.\n   * @param transformFnc The callback function for the transformation. Check the signature in the function description.\n   * @return The current path object for easy call chaining.\n   */\n  transform(\n    transformFnc: <T extends PathParams = PathParams>(\n      cmd: PathCommand<T>,\n      param: keyof T,\n      cmdIndex: number,\n      paramIndex: number,\n      cmds: PathCommand<T>[]\n    ) => number | void\n  ) {\n    forEachParam(\n      this.pathElements,\n      (pathElement, paramName, pathElementIndex, paramIndex, pathElements) => {\n        const transformed = transformFnc(\n          pathElement,\n          paramName,\n          pathElementIndex,\n          paramIndex,\n          pathElements\n        );\n        if (transformed || transformed === 0) {\n          pathElement[paramName] = transformed;\n        }\n      }\n    );\n    return this;\n  }\n\n  /**\n   * This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.\n   * @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.\n   */\n  clone(close = false) {\n    const clone = new SvgPath(close || this.close);\n    clone.pos = this.pos;\n    clone.pathElements = this.pathElements\n      .slice()\n      .map(pathElement => ({ ...pathElement }));\n    clone.options = { ...this.options };\n    return clone;\n  }\n\n  /**\n   * 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.\n   * @param command The command you'd like to use to split the path\n   */\n  splitByCommand(command: string) {\n    const split = [new SvgPath()];\n\n    this.pathElements.forEach(pathElement => {\n      if (\n        pathElement.command === command.toUpperCase() &&\n        split[split.length - 1].pathElements.length !== 0\n      ) {\n        split.push(new SvgPath());\n      }\n\n      split[split.length - 1].pathElements.push(pathElement);\n    });\n\n    return split;\n  }\n}\n"
  },
  {
    "path": "src/svg/animation.ts",
    "content": "import type { EventEmitter } from '../event';\nimport { ensureUnit, quantity } from '../core/lang';\nimport type { Attributes, AnimationDefinition, AnimationEvent } from './types';\nimport type { Svg } from './Svg';\n\n/**\n * This Object contains some standard easing cubic bezier curves.\n * Then can be used with their name in the `Svg.animate`.\n * You can also extend the list and use your own name in the `animate` function.\n * Click the show code button to see the available bezier functions.\n */\nexport const easings = {\n  easeInSine: [0.47, 0, 0.745, 0.715],\n  easeOutSine: [0.39, 0.575, 0.565, 1],\n  easeInOutSine: [0.445, 0.05, 0.55, 0.95],\n  easeInQuad: [0.55, 0.085, 0.68, 0.53],\n  easeOutQuad: [0.25, 0.46, 0.45, 0.94],\n  easeInOutQuad: [0.455, 0.03, 0.515, 0.955],\n  easeInCubic: [0.55, 0.055, 0.675, 0.19],\n  easeOutCubic: [0.215, 0.61, 0.355, 1],\n  easeInOutCubic: [0.645, 0.045, 0.355, 1],\n  easeInQuart: [0.895, 0.03, 0.685, 0.22],\n  easeOutQuart: [0.165, 0.84, 0.44, 1],\n  easeInOutQuart: [0.77, 0, 0.175, 1],\n  easeInQuint: [0.755, 0.05, 0.855, 0.06],\n  easeOutQuint: [0.23, 1, 0.32, 1],\n  easeInOutQuint: [0.86, 0, 0.07, 1],\n  easeInExpo: [0.95, 0.05, 0.795, 0.035],\n  easeOutExpo: [0.19, 1, 0.22, 1],\n  easeInOutExpo: [1, 0, 0, 1],\n  easeInCirc: [0.6, 0.04, 0.98, 0.335],\n  easeOutCirc: [0.075, 0.82, 0.165, 1],\n  easeInOutCirc: [0.785, 0.135, 0.15, 0.86],\n  easeInBack: [0.6, -0.28, 0.735, 0.045],\n  easeOutBack: [0.175, 0.885, 0.32, 1.275],\n  easeInOutBack: [0.68, -0.55, 0.265, 1.55]\n};\n\nexport function createAnimation(\n  element: Svg,\n  attribute: string,\n  animationDefinition: AnimationDefinition,\n  createGuided = false,\n  eventEmitter?: EventEmitter\n) {\n  const { easing, ...def } = animationDefinition;\n  const attributeProperties: Attributes = {};\n  let animationEasing;\n  let timeout;\n\n  // Check if an easing is specified in the definition object and delete it from the object as it will not\n  // be part of the animate element attributes.\n  if (easing) {\n    // If already an easing Bézier curve array we take it or we lookup a easing array in the Easing object\n    animationEasing = Array.isArray(easing) ? easing : easings[easing];\n  }\n\n  // If numeric dur or begin was provided we assume milli seconds\n  def.begin = ensureUnit(def.begin, 'ms');\n  def.dur = ensureUnit(def.dur, 'ms');\n\n  if (animationEasing) {\n    def.calcMode = 'spline';\n    def.keySplines = animationEasing.join(' ');\n    def.keyTimes = '0;1';\n  }\n\n  // Adding \"fill: freeze\" if we are in guided mode and set initial attribute values\n  if (createGuided) {\n    def.fill = 'freeze';\n    // Animated property on our element should already be set to the animation from value in guided mode\n    attributeProperties[attribute] = def.from;\n    element.attr(attributeProperties);\n\n    // In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin\n    // which needs to be in ms aside\n    timeout = quantity(def.begin || 0).value;\n    def.begin = 'indefinite';\n  }\n\n  const animate = element.elem('animate', {\n    attributeName: attribute,\n    ...def\n  });\n\n  if (createGuided) {\n    // If guided we take the value that was put aside in timeout and trigger the animation manually with a timeout\n    setTimeout(() => {\n      // If beginElement fails we set the animated attribute to the end position and remove the animate element\n      // This happens if the SMIL ElementTimeControl interface is not supported or any other problems occurred in\n      // the browser. (Currently FF 34 does not support animate elements in foreignObjects)\n      try {\n        // @ts-expect-error Try legacy API.\n        animate._node.beginElement();\n      } catch (err) {\n        // Set animated attribute to current animated value\n        attributeProperties[attribute] = def.to;\n        element.attr(attributeProperties);\n        // Remove the animate element as it's no longer required\n        animate.remove();\n      }\n    }, timeout);\n  }\n\n  const animateNode = animate.getNode();\n\n  if (eventEmitter) {\n    animateNode.addEventListener('beginEvent', () =>\n      eventEmitter.emit<AnimationEvent>('animationBegin', {\n        element: element,\n        animate: animateNode,\n        params: animationDefinition\n      })\n    );\n  }\n\n  animateNode.addEventListener('endEvent', () => {\n    if (eventEmitter) {\n      eventEmitter.emit<AnimationEvent>('animationEnd', {\n        element: element,\n        animate: animateNode,\n        params: animationDefinition\n      });\n    }\n\n    if (createGuided) {\n      // Set animated attribute to current animated value\n      attributeProperties[attribute] = def.to;\n      element.attr(attributeProperties);\n      // Remove the animate element as it's no longer required\n      animate.remove();\n    }\n  });\n}\n"
  },
  {
    "path": "src/svg/index.ts",
    "content": "export { easings } from './animation';\nexport * from './Svg';\nexport * from './SvgPath';\nexport * from './SvgList';\nexport * from './types';\n"
  },
  {
    "path": "src/svg/types.ts",
    "content": "import type { SegmentData } from '../core';\nimport type { easings } from './animation';\nimport type { Svg } from './Svg';\n\nexport interface BasePathParams {\n  x: number;\n  y: number;\n}\n\nexport type MoveParams = BasePathParams;\n\nexport type LineParams = BasePathParams;\n\nexport interface CurveParams extends BasePathParams {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n}\n\nexport interface ArcParams extends BasePathParams {\n  rx: number;\n  ry: number;\n  xAr: number;\n  lAf: number;\n  sf: number;\n}\n\nexport type PathParams = MoveParams | LineParams | CurveParams | ArcParams;\n\nexport type PathCommand<T extends PathParams = PathParams> = {\n  command: string;\n  data?: SegmentData;\n} & T;\n\nexport interface SvgPathOptions {\n  accuracy?: number;\n}\n\nexport type Attributes = Record<string, number | string | undefined | null>;\n\nexport interface AnimationDefinition {\n  id?: string;\n  easing?: number[] | keyof typeof easings;\n  calcMode?: 'discrete' | 'linear' | 'paced' | 'spline';\n  restart?: 'always' | 'whenNotActive' | 'never';\n  repeatCount?: number | 'indefinite';\n  repeatDur?: string | 'indefinite';\n  keySplines?: string;\n  keyTimes?: string;\n  fill?: string;\n  min?: number | string;\n  max?: number | string;\n  begin?: number | string;\n  end?: number | string;\n  dur: number | string;\n  from: number | string;\n  to: number | string;\n}\n\nexport interface AnimationEvent {\n  element: Svg;\n  animate: Element;\n  params: AnimationDefinition;\n}\n"
  },
  {
    "path": "src/utils/extend.ts",
    "content": "/**\n * Simple recursive object extend\n * @param target Target object where the source will be merged into\n * @param sources This object (objects) will be merged into target and then target is returned\n * @return An object that has the same reference as target but is extended and merged with the properties of source\n */\nexport function extend<T>(target: T): T;\nexport function extend<T, A>(target: T, a: A): T & A;\nexport function extend<T, A, B>(target: T, a: A, b: B): T & A & B;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function extend(target: any = {}, ...sources: any[]) {\n  for (let i = 0; i < sources.length; i++) {\n    const source = sources[i];\n    const targetProto = Object.getPrototypeOf(target);\n    for (const prop in source) {\n      if (targetProto !== null && prop in targetProto) {\n        continue; // prevent prototype pollution\n      }\n      const sourceProp = source[prop];\n      if (\n        typeof sourceProp === 'object' &&\n        sourceProp !== null &&\n        !(sourceProp instanceof Array)\n      ) {\n        target[prop] = extend(target[prop], sourceProp);\n      } else {\n        target[prop] = sourceProp;\n      }\n    }\n  }\n\n  return target;\n}\n"
  },
  {
    "path": "src/utils/functional.ts",
    "content": "/**\n * Helps to simplify functional style code\n * @param n This exact value will be returned by the noop function\n * @return The same value that was provided to the n parameter\n */\nexport const noop = <T>(n: T) => n;\n\n/**\n * Functional style helper to produce array with given length initialized with undefined values\n */\nexport function times(length: number): undefined[];\nexport function times<T = unknown>(\n  length: number,\n  filler: (index: number) => T\n): T[];\nexport function times<T = unknown>(\n  length: number,\n  filler?: (index: number) => T\n) {\n  return Array.from({ length }, filler ? (_, i) => filler(i) : () => void 0);\n}\n\n/**\n * Sum helper to be used in reduce functions\n */\nexport const sum = (previous: number, current: number) =>\n  previous + (current ? current : 0);\n\n/**\n * 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).\n *\n * For example:\n * @example\n * ```ts\n * const data = [[1, 2], [3], []];\n * serialMap(data, cb);\n *\n * // where cb will be called 2 times\n * // 1. call arguments: (1, 3, undefined)\n * // 2. call arguments: (2, undefined, undefined)\n * ```\n */\nexport const serialMap = <T, K>(array: T[][], callback: (...args: T[]) => K) =>\n  times(Math.max(...array.map(element => element.length)), index =>\n    callback(...array.map(element => element[index]))\n  );\n"
  },
  {
    "path": "src/utils/index.ts",
    "content": "export * from './types';\nexport * from './extend';\nexport * from './functional';\nexport * from './utils';\n"
  },
  {
    "path": "src/utils/types.ts",
    "content": "export type FilterByKey<T, K extends string> = T extends Record<K, unknown>\n  ? T\n  : T extends Partial<Record<K, unknown>>\n  ? T & { [key in K]: T[K] }\n  : never;\n\nexport type RequiredKeys<T, K extends keyof T, V extends keyof T = never> = T &\n  Required<Pick<T, K | V>> & { [key in V]: Required<T[V]> };\n"
  },
  {
    "path": "src/utils/utils.ts",
    "content": "import type { FilterByKey } from './types';\n\n/**\n * This function safely checks if an objects has an owned property.\n * @param target The object where to check for a property\n * @param property The property name\n * @returns Returns true if the object owns the specified property\n */\nexport function safeHasProperty<T, K extends string>(\n  target: T,\n  property: K\n): target is FilterByKey<T, K>;\nexport function safeHasProperty(target: unknown, property: string) {\n  return (\n    target !== null &&\n    typeof target === 'object' &&\n    Reflect.has(target, property)\n  );\n}\n\n/**\n * 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.\n */\nexport function isNumeric(value: number): true;\nexport function isNumeric(value: unknown): boolean;\nexport function isNumeric(value: unknown) {\n  return value !== null && isFinite(value as number);\n}\n\n/**\n * Returns true on all falsey values except the numeric value 0.\n */\nexport function isFalseyButZero(\n  value: unknown\n): value is undefined | null | false | '' {\n  return !value && value !== 0;\n}\n\n/**\n * 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.\n */\nexport function getNumberOrUndefined(value: number): number;\nexport function getNumberOrUndefined(value: unknown): number | undefined;\nexport function getNumberOrUndefined(value: unknown) {\n  return isNumeric(value) ? Number(value) : undefined;\n}\n\n/**\n * Checks if value is array of arrays or not.\n */\nexport function isArrayOfArrays(data: unknown): data is unknown[][] {\n  if (!Array.isArray(data)) {\n    return false;\n  }\n\n  return data.every(Array.isArray);\n}\n\n/**\n * Loop over array.\n */\nexport function each<T>(\n  list: T[],\n  callback: (item: T, index: number, itemIndex: number) => void,\n  reverse = false\n) {\n  let index = 0;\n\n  list[reverse ? 'reduceRight' : 'reduce']<void>(\n    (_, item, itemIndex) => callback(item, index++, itemIndex),\n    void 0\n  );\n}\n"
  },
  {
    "path": "test/mock/cssModule.js",
    "content": "const mock = new Proxy(\n  {},\n  {\n    get() {\n      return '';\n    }\n  }\n);\n\nmodule.exports = mock;\n"
  },
  {
    "path": "test/mock/dom.ts",
    "content": "export type Fixture = ReturnType<typeof addMockWrapper>;\n\nexport let container: HTMLDivElement | null = null;\n\nconst getBoundingClientRect = SVGElement.prototype.getBoundingClientRect;\n\nexport function mockDom() {\n  if (!container) {\n    container = document.createElement('div');\n    container.setAttribute('data-fixture-container', `${+new Date()}`);\n    document.body.appendChild(container);\n  }\n}\n\nexport function destroyMockDom() {\n  if (container) {\n    document.body.removeChild(container);\n    container = null;\n  }\n}\n\nexport function addMockWrapper(fixture: string) {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML += fixture;\n  container?.appendChild(wrapper);\n  return {\n    wrapper,\n    container,\n    fixture\n  };\n}\n\nexport function mockDomRects() {\n  // @ts-expect-error Mock DOM API.\n  SVGElement.prototype.getBoundingClientRect = () => ({\n    x: 0,\n    y: 0,\n    width: 500,\n    height: 500,\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n  });\n\n  Object.defineProperties(SVGElement.prototype, {\n    clientWidth: {\n      configurable: true,\n      get: () => 500\n    },\n    clientHeight: {\n      configurable: true,\n      get: () => 500\n    }\n  });\n}\n\nexport function destroyMockDomRects() {\n  SVGElement.prototype.getBoundingClientRect = getBoundingClientRect;\n\n  // Redefine clientWidth and clientHeight properties from the prototype of SVGElement\n  const ElementPrototype = Object.getPrototypeOf(SVGElement.prototype);\n  Object.defineProperties(SVGElement.prototype, {\n    clientWidth: Object.getOwnPropertyDescriptor(\n      ElementPrototype,\n      'clientWidth'\n    )!,\n    clientHeight: Object.getOwnPropertyDescriptor(\n      ElementPrototype,\n      'clientHeight'\n    )!\n  });\n}\n"
  },
  {
    "path": "test/setup.js",
    "content": "import '@testing-library/jest-dom/extend-expect';\n\nwindow.matchMedia = () => ({});\n"
  },
  {
    "path": "test/storyshots.spec.js",
    "content": "import { skipable } from './utils/skipable';\nimport { initStoryshots } from './utils/storyshots';\n\nconst testTimeout = 60 * 1000 * 10;\nconst config = {\n  url: 'http://localhost:6006',\n  setupTimeout: testTimeout,\n  testTimeout,\n  getGotoOptions() {\n    return {\n      waitUntil: 'networkidle0',\n      timeout: 0\n    };\n  }\n};\n\nconst describeWhenLinux = skipable(\n  describe,\n  process.platform !== 'linux' || Boolean(process.env.STORYSHOTS_SKIP)\n);\n\ndescribeWhenLinux('Storyshots', () => {\n  initStoryshots(config);\n});\n"
  },
  {
    "path": "test/utils/skipable.js",
    "content": "/**\n * Make block definition method skipable.\n * @param fn - Jest's block definition method.\n * @param skip - Skip test block.\n * @returns Skipable block definition methid.\n */\nexport function skipable(fn, skip) {\n  return skip ? fn.skip : fn;\n}\n"
  },
  {
    "path": "test/utils/storyshots/imageSnapshotWithStoryParameters.js",
    "content": "import { devices } from 'puppeteer';\nimport { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';\n\nimport { Viewport } from './viewport';\n\nconst captureRoot = true;\nconst offset = '40';\n\n/**\n * Handle story parameters.\n * @param page - Page instance.\n * @param options - Story options.\n * @returns Promise.\n */\nasync function beforeScreenshotHook(page, options) {\n  const {\n    storyshots: { currentViewport } = {},\n    parameters: { storyshots: { beforeScreenshot } = {} }\n  } = options.context;\n\n  if (currentViewport && currentViewport !== Viewport.Default) {\n    await page.emulate(devices[currentViewport]);\n  }\n\n  if (beforeScreenshot) {\n    await beforeScreenshot(page, options);\n  }\n\n  if (captureRoot) {\n    await page.$eval(\n      '#root',\n      (root, offset) => {\n        root.style.padding = `${offset}px`;\n      },\n      offset\n    );\n\n    return page.$('#root');\n  }\n\n  return null;\n}\n\nfunction getCaptureRootScreenshotOptions() {\n  return {\n    encoding: 'base64', // encoding: 'base64' is a property required by puppeteer\n    fullPage: !captureRoot\n  };\n}\n\n/**\n * Create snapshot tests function with story parameters.\n * @param config - Snapshots config.\n * @returns Snapshot tests function.\n */\nexport function imageSnapshotWithStoryParameters(config) {\n  const { beforeScreenshot, getScreenshotOptions } = config;\n  const configWithBeforeScreenshot = {\n    ...config,\n    getScreenshotOptions: getScreenshotOptions\n      ? options => ({\n          ...getCaptureRootScreenshotOptions(options),\n          ...getScreenshotOptions(options)\n        })\n      : getCaptureRootScreenshotOptions,\n    beforeScreenshot: beforeScreenshot\n      ? async (page, options) => {\n          const captureTarget = await beforeScreenshotHook(page, options);\n\n          await beforeScreenshot(page, options);\n\n          return captureTarget;\n        }\n      : beforeScreenshotHook\n  };\n  const test = imageSnapshot(configWithBeforeScreenshot);\n  const testFn = async options => {\n    const { context } = options;\n    const { storyshots: { viewports = [] } = {} } = context.parameters;\n\n    if (!viewports.length) {\n      await test(options);\n      return;\n    }\n\n    for (const viewport of viewports) {\n      const currentViewport =\n        viewport === Viewport.Default ? undefined : viewport;\n      const originalId = context.id;\n\n      context.storyshots = {\n        currentViewport\n      };\n\n      await test(options);\n\n      context.id = originalId;\n    }\n\n    expect.assertions(viewports.length);\n  };\n\n  testFn.timeout = test.timeout;\n  testFn.beforeAll = test.beforeAll;\n  testFn.afterAll = test.afterAll;\n\n  return testFn;\n}\n"
  },
  {
    "path": "test/utils/storyshots/index.js",
    "content": "export * from './initStoryshots';\nexport * from './imageSnapshotWithStoryParameters';\nexport * from './storybook';\n"
  },
  {
    "path": "test/utils/storyshots/initStoryshots.js",
    "content": "import baseInitStoryshots from '@storybook/addon-storyshots';\n\nimport { imageSnapshotWithStoryParameters } from './imageSnapshotWithStoryParameters';\nimport { startStorybook } from './storybook';\n\n/**\n * Default page customizer.\n * @param page - Puppeteer's page instance.\n * @returns Task promise.\n */\nexport function defaultCustomizePage(page) {\n  return page.setViewport({\n    width: 1920,\n    height: 1080\n  });\n}\n\n/**\n * Prepare identifier for use in filename.\n * @param indentifierPart - Identifier string part.\n * @returns Sanitized identifier ready for use in filename.\n */\nexport function sanitizeSnapshotIdentifierPart(indentifierPart) {\n  return indentifierPart.replace(/[\\s/]|%20/g, '-').replace(/\"|%22/g, '');\n}\n\n/**\n * Default match options creator.\n * @param storyOptions - Story info.\n * @param storyOptions.context - Story context.\n * @param storyOptions.context.kind - Story kind.\n * @param storyOptions.context.story - Story name.\n * @param storyOptions.context.storyshots - Storyshots metadata.\n * @returns Match options.\n */\nexport function defaultGetMatchOptions({\n  context: { kind, story, storyshots }\n}) {\n  const currentViewport = storyshots?.currentViewport;\n  const sanitizedKind = sanitizeSnapshotIdentifierPart(kind);\n  const sanitizedStory = sanitizeSnapshotIdentifierPart(story);\n  const sanitizedParams = currentViewport\n    ? `__${sanitizeSnapshotIdentifierPart(currentViewport)}`\n    : '';\n\n  process.stdout.write(`📷  ${kind} ${story} ${currentViewport || ''}\\n`);\n\n  return {\n    customSnapshotIdentifier: `${sanitizedKind}__${sanitizedStory}${sanitizedParams}`\n  };\n}\n\n/**\n * Initialize and run storyshots.\n * @param config - Storyshots config.\n */\nexport function initStoryshots(config) {\n  process.env.STORYBOOK_STORYSHOTS = JSON.stringify(true);\n\n  const finalOptions = {\n    getMatchOptions: defaultGetMatchOptions,\n    customizePage: defaultCustomizePage,\n    ...config\n  };\n  const storybook = startStorybook(config);\n  const test = imageSnapshotWithStoryParameters({\n    storybookUrl: config.url,\n    ...finalOptions\n  });\n  const { beforeAll, afterAll } = test;\n  const { warn } = console;\n\n  test.beforeAll = async () => {\n    await storybook.start();\n    await beforeAll();\n  };\n  test.beforeAll.timeout = beforeAll.timeout;\n\n  test.afterAll = async () => {\n    await storybook.stop();\n    await afterAll();\n  };\n\n  console.warn = () => undefined;\n  baseInitStoryshots({\n    framework: 'html',\n    suite: 'Storyshots',\n    test\n  });\n  console.warn = warn;\n}\n"
  },
  {
    "path": "test/utils/storyshots/storybook.js",
    "content": "import { spawn } from 'child_process';\n\nimport { createServer } from 'http-server';\nimport del from 'del';\n\nconst STORYBOOK_STATIC = 'storybook-static';\nconst errorMatcher = /ERR!|Error:|ERROR in|UnhandledPromiseRejectionWarning/;\n\n/**\n * Run storybook static build.\n * @param options - Build options.\n * @param [options.env] - Environment variables.\n * @param [options.verbose] - Print verbose messages.\n * @returns Build process promise.\n */\nexport async function buildStorybook({ env = {}, verbose = false }) {\n  return new Promise((resolve, reject) => {\n    const buildProcess = spawn('build-storybook', [], {\n      cwd: process.cwd(),\n      env: {\n        ...process.env,\n        NODE_ENV: 'production',\n        ...env\n      },\n      detached: true\n    });\n    const onData = data => {\n      const message = data.toString('utf8');\n\n      if (verbose) {\n        process.stdout.write(message);\n      }\n\n      if (errorMatcher.test(message)) {\n        reject(new Error(message));\n      }\n    };\n\n    buildProcess.on('exit', (code, signal) => {\n      if (code === 0) {\n        resolve();\n        return;\n      }\n\n      reject(new Error(`Exit code: ${code || signal || 'unknown'}`));\n    });\n    buildProcess.stdout.on('data', onData);\n    buildProcess.stderr.on('data', onData);\n  });\n}\n\n/**\n * Build static and start storybook server.\n * @param options - Storybook build and start options.\n * @returns Server controls.\n */\nexport function startStorybook(options) {\n  const { url, skipBuild } = options;\n  const parsedUrl = new URL(url);\n  const server = createServer({\n    root: STORYBOOK_STATIC\n  });\n\n  return {\n    async start() {\n      if (!skipBuild) {\n        await buildStorybook(options);\n      }\n\n      await new Promise(resolve => {\n        server.listen(\n          parseInt(parsedUrl.port, 10),\n          parsedUrl.hostname,\n          resolve\n        );\n      });\n    },\n    async stop() {\n      server.close();\n\n      if (!skipBuild) {\n        await del(STORYBOOK_STATIC);\n      }\n    }\n  };\n}\n"
  },
  {
    "path": "test/utils/storyshots/viewport.ts",
    "content": "export const Viewport = {\n  Default: 'default',\n  Mobile: 'iPhone X',\n  MobileLandscape: 'iPhone X landscape',\n  SmallMobile: 'iPhone SE',\n  SmallMobileLandscape: 'iPhone SE landscape',\n  Tablet: 'iPad',\n  TabletLandscape: 'iPad landscape',\n  SmallTablet: 'Nexus 7',\n  SmallTabletLandscape: 'Nexus 7 landscape'\n};\n"
  },
  {
    "path": "tsconfig.build.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"exclude\": [\n    \"**/*.stories.ts\",\n    \"**/*.spec.ts\"\n  ]\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    /* Type Checking */\n    \"strict\": true,\n    \"strictBindCallApply\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitOverride\": true,\n    \"noImplicitReturns\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    /* Modules */\n    \"baseUrl\": \".\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"paths\": {\n      \"chartist-dev\": [\"src\"]\n    },\n    /* Emit */\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"inlineSourceMap\": true,\n    \"outDir\": \"dist\",\n    /* Interop Constraints */\n    \"allowSyntheticDefaultImports\": true,\n    \"isolatedModules\": true,\n    /* Language and Environment */\n    \"lib\": [\n      \"dom\",\n      \"esnext\"\n    ],\n    \"target\": \"esnext\",\n    /* Completeness */\n    \"skipLibCheck\": true\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "website/.gitignore",
    "content": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Generated files\n.docusaurus\n.cache-loader\n\n# Misc\n.DS_Store\n.env.*\n\nnpm-debug.log*\n"
  },
  {
    "path": "website/CNAME",
    "content": "chartist.js.org\n"
  },
  {
    "path": "website/README.md",
    "content": "# Website\n\nThis website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.\n\n### Installation\n\n```\n$ pnpm install\n```\n\n### Local Development\n\n```\n$ pnpm start\n```\n\nThis command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.\n\n### Build\n\n```\n$ pnpm build\n```\n\nThis command generates static content into the `build` directory and can be served using any static contents hosting service.\n\n### Deployment\n\n```\n$ GIT_USER=<Your GitHub username> USE_SSH=true pnpm deploy\n```\n\nIf you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.\n"
  },
  {
    "path": "website/babel.config.js",
    "content": "module.exports = {\n  presets: [require.resolve('@docusaurus/core/lib/babel/preset')]\n};\n"
  },
  {
    "path": "website/docs/api/.gitignore",
    "content": "*\n!.gitignore\n!docs.js\n!basics.md\n"
  },
  {
    "path": "website/docs/api/basics.md",
    "content": "---\nslug: /api/basics\ndescription: List of Chartist basic APIs.\n---\n\n#  List of basic APIs:\n\n- Charts\n  - [BarChart](/api/classes/BarChart)\n  - [LineChart](/api/classes/LineChart)\n  - [PieChart](/api/classes/PieChart)\n- Axes types\n  - [AutoScaleAxis](/api/classes/AutoScaleAxis)\n  - [FixedScaleAxis](/api/classes/FixedScaleAxis)\n  - [StepAxis](/api/classes/StepAxis)\n- Svg wrappers\n  - [Svg](/api/classes/Svg)\n  - [SvgPath](/api/classes/SvgPath)\n  - [SvgList](/api/classes/SvgList)\n- [Interpolation](/api/namespaces/Interpolation)\n- [EventEmitter](/api/classes/EventEmitter)\n"
  },
  {
    "path": "website/docs/api/docs.js",
    "content": "exports.docs = [\n  { title: 'Table of Contents', slug: '/api/basics' },\n  { title: 'BarChart', slug: '/api/classes/BarChart' },\n  { title: 'LineChart', slug: '/api/classes/LineChart' },\n  { title: 'PieChart', slug: '/api/classes/PieChart' },\n  { title: 'AutoScaleAxis', slug: '/api/classes/AutoScaleAxis' },\n  { title: 'FixedScaleAxis', slug: '/api/classes/FixedScaleAxis' },\n  { title: 'StepAxis', slug: '/api/classes/StepAxis' },\n  { title: 'Svg', slug: '/api/classes/Svg' },\n  { title: 'SvgPath', slug: '/api/classes/SvgPath' },\n  { title: 'SvgList', slug: '/api/classes/SvgList' },\n  { title: 'Interpolation', slug: '/api/namespaces/Interpolation' },\n  { title: 'EventEmitter', slug: '/api/classes/EventEmitter' }\n];\n"
  },
  {
    "path": "website/docs/docs.js",
    "content": "exports.docs = [\n  { title: \"What's new in v1?\", slug: '/docs/whats-new-in-v1' },\n  { title: 'What is it made for?', slug: '/docs/what-is-it-made-for' }\n];\n"
  },
  {
    "path": "website/docs/examples/bar-chart.mdx",
    "content": "---\ndescription: Bar chart examples\n---\n\nimport ContextProvider from '../../src/components/ContextProvider';\n\n# Bar chart examples\n\n## Bi-polar bar chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/bi-polar-interpolated?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Distributed series\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/distributed-series?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Extreme responsive configuration\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/extreme-responsive?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Horizontal bar chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/horizontal?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Label placement\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/label-position?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Multi-line labels\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/multiline?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Overlapping bars on mobile\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/overlapping-bars?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Stacked bar chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/stacked?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Add peak circles using the draw events\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/bar/with-circle-modify-drawing?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Bar chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n"
  },
  {
    "path": "website/docs/examples/docs.js",
    "content": "exports.docs = [\n  { title: 'Bar Chart', slug: '/examples/bar-chart' },\n  { title: 'Line Chart', slug: '/examples/line-chart' },\n  { title: 'Pie Chart', slug: '/examples/pie-chart' }\n];\n"
  },
  {
    "path": "website/docs/examples/index.mdx",
    "content": "---\nslug: /examples\ndescription: List of Chartist usage examples.\n---\n\nimport Link from '@docusaurus/Link';\nimport { docs } from './docs';\n\n# Examples\n\n<ul>\n  {docs.map(({ title, slug }, i) => (\n    <li key={i}>\n      <Link to={slug}>{title}</Link>\n    </li>\n  ))}\n</ul>\n"
  },
  {
    "path": "website/docs/examples/line-chart.mdx",
    "content": "---\ndescription: Line chart examples\n---\n\nimport ContextProvider from '../../src/components/ContextProvider';\n\n# Line chart examples\n\n## Line chart with area\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/area?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Auto scale axis\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/axis-auto?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Fixed and auto scale axis\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/axis-fixed-and-auto?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Bi-polar Line chart with area only\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/bipolar-area?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Filled holes in data\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/data-fill-holes?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Holes in data\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/data-holes?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Using events to replace graphics\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/modify-drawing?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Only whole numbers\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/only-integer?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## SVG Path animation\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/path-animation?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Line scatter diagram with responsive settings\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/scatter-random?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Series Overrides\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/series-override?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Simple line chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/simple?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Simple responsive options\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/simple-responsive?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Line Interpolation / Smoothing\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/simple-smoothing?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Simple SMIL Animations\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/simple-svg-animation?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Advanced SMIL Animations\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/svg-animation?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Timeseries\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/line/timeseries?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Line chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n"
  },
  {
    "path": "website/docs/examples/pie-chart.mdx",
    "content": "---\ndescription: Pie chart examples\n---\n\nimport ContextProvider from '../../src/components/ContextProvider';\n\n# Pie chart examples\n\n## Pie chart with custom labels\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/pie/custom-labels?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Pie chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Animating a Donut with Svg.animate\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/pie/donut-animation?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Pie chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Donut chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/pie/donut-chart?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Pie chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Simple pie chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/pie/simple?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Pie chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n\n## Gauge chart\n\n<ContextProvider>\n  {({ branch, theme }) => (\n    <iframe\n      loading='lazy'\n      src={`https://codesandbox.io/embed/github/chartist-js/chartist/tree/${branch}/sandboxes/pie/simple-gauge?fontsize=14&hidenavigation=1&module=%2Findex.ts&theme=${theme}`}\n      style={{\n        width: '100%',\n        height: '500px',\n        border: 0,\n        borderRadius: '4px',\n        overflow: 'hidden',\n      }}\n      title='Pie chart example'\n      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'\n      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'\n    ></iframe>\n  )}\n</ContextProvider>\n"
  },
  {
    "path": "website/docs/index.mdx",
    "content": "---\nslug: /\ndescription: A simple responsive charting library built with SVG\n---\n\nimport Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';\nimport logoUrl from '@site/static/img/chartist-guy.gif';\n\n# Big welcome by the Chartist Guy\n\n[![NPM version][npm]][npm-url]\n[![Downloads][downloads]][downloads-url]\n[![Build status][build]][build-url]\n[![Coverage status][coverage]][coverage-url]\n[![Bundle size][size]][size-url]\n[![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url]\n\n[npm]: https://img.shields.io/npm/v/chartist.svg\n[npm-url]: https://www.npmjs.com/package/chartist\n\n[downloads]: https://img.shields.io/npm/dm/chartist.svg\n[downloads-url]: https://www.npmjs.com/package/chartist\n\n[build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml\n[build-url]: https://github.com/chartist-js/chartist/actions\n\n[coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg\n[coverage-url]: https://app.codecov.io/gh/chartist-js/chartist\n\n[size]: https://img.shields.io/bundlephobia/minzip/chartist\n[size-url]: https://bundlephobia.com/package/chartist\n\n[chat]: https://badges.gitter.im/gionkunz/chartist-js.svg\n[chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge\n\n<p align=\"center\">\n  <img width=\"400\" alt=\"The Chartist Guy\" src={logoUrl}/>\n</p>\n\nChartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already\nout there, but they are either:\n\n- use the wrong technologies for illustration (canvas)\n- weighs hundreds of kilobytes\n- are not flexible enough while keeping the configuration simple\n- are not friendly to designers\n- more annoying things\n\nThat's why we started Chartist and our goal is to solve all of the above issues.\n\n## Quickstart\n\nInstall this library using your favorite package manager:\n\n<Tabs>\n  <TabItem value=\"pnpm\" default>\n\n  ```bash\n  pnpm add chartist\n  ```\n\n  </TabItem>\n  <TabItem value=\"yarn\">\n\n  ```bash\n  yarn add chartist\n  ```\n\n  </TabItem>\n  <TabItem value=\"npm\">\n\n  ```bash\n  npm install --save chartist\n  ```\n\n  </TabItem>\n</Tabs>\n\nThen, just import chart you want and use it:\n\n```js\nimport { BarChart } from 'chartist';\n\nnew BarChart('#chart', {\n  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],\n  series: [\n    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]\n  ]\n}, {\n  high: 10,\n  low: -10,\n  axisX: {\n    labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)\n  }\n});\n```\n\n:::tip Need an API to fetch data?\nPlease consider [Cube](https://cube.dev/?ref=eco-chartist), an open-source API for data apps.\n:::\n\n[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-chartist)\n\n## Examples\n\nPlease see [live examples](/examples).\n\n## Getting Help\n\nNeed 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).\n\nIf you've encountered an issue, please [file it on GitHub](https://github.com/chartist-js/chartist/issues).\n"
  },
  {
    "path": "website/docs/plugins.md",
    "content": "---\nslug: /docs/plugins\ndescription: Plugins\n---\n\n# Plugins\n\nComing soon.\n"
  },
  {
    "path": "website/docs/what-is-it-made-for.md",
    "content": "---\nslug: /docs/what-is-it-made-for\ndescription: What is Chartist made for?\n---\n\n# What is it made for?\n\nChartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. \nIt's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing \nit's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers \ntoday and say good bye to the idea of solving all problems ourselves.\n\nChartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This \nalso means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be \ndone with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing \"Simple \nresponsive Charts\" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.\n"
  },
  {
    "path": "website/docs/whats-new-in-v1.md",
    "content": "---\nslug: /docs/whats-new-in-v1\ndescription: What's new in Chartist v1?\n---\n\n# What's new in v1?\n\n## ESM\n\nNow 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).\n\n### Migration from v0.11\n\n- Each property of Chartist object now is named export.\n- Chart classes were renamed.\n- Easing object now is named export.\n\n```js\nconst Chartist = require('chartist')\n\nnew Chartist.Bar(/* ... */);\nnew Chartist.Line(/* ... */);\nnew Chartist.Pie(/* ... */);\nnew Chartist.Svg(/* ... */);\nChartist.Svg.Easing\n// ...\n\n// ->\n\nimport { BarChart, LineChart, PieChart, Svg, easings } from 'chartist'\n\nnew BarChart(/* ... */)\nnew LineChart(/* ... */)\nnew PieChart(/* ... */)\nnew Svg(/* ... */)\neasings\n// ...\n```\n\n## TypeScript\n\nChartist was rewritten and fully typed with TypeScript.\n\n### Some of exposed types\n\n```ts\nimport type {\n  BarChartData,\n  BarChartOptions,\n  LineChartData,\n  LineChartOptions,\n  PieChartData,\n  PieChartOptions\n} from 'chartist'\n```\n"
  },
  {
    "path": "website/docusaurus.config.js",
    "content": "// @ts-check\n\nconst branch = require('git-branch');\nconst codeTheme = require('./src/prism-theme');\n\nconst currentBranch = process.env.BRANCH || branch.sync();\n/** @type {import('@docusaurus/types').Config} */\nconst config = {\n  title: 'Chartist',\n  tagline: 'A simple responsive charting library built with SVG',\n  url: 'https://chartist.dev',\n  baseUrl: '/',\n  onBrokenLinks: 'throw',\n  onBrokenMarkdownLinks: 'warn',\n  favicon: 'img/favicon.ico',\n  trailingSlash: false,\n  organizationName: 'chartist-js',\n  projectName: 'chartist',\n  noIndex: currentBranch !== 'main',\n\n  customFields: {\n    branch: currentBranch\n  },\n\n  presets: [\n    [\n      '@docusaurus/preset-classic',\n      /** @type {import('@docusaurus/preset-classic').Options} */\n      {\n        docs: {\n          routeBasePath: '/',\n          sidebarPath: require.resolve('./sidebars.js'),\n          editUrl: 'https://github.com/chartist-js/chartist/edit/main/website/'\n        },\n        theme: {\n          customCss: [\n            require.resolve('./src/css/custom.css'),\n            require.resolve('./src/css/recoloring.css')\n          ]\n        }\n      }\n    ]\n  ],\n\n  themeConfig:\n    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n    {\n      navbar: {\n        title: 'Chartist',\n        logo: {\n          alt: 'Chartist logo',\n          src: 'img/logo.svg'\n        },\n        items: [\n          {\n            type: 'doc',\n            docId: 'api/basics',\n            position: 'left',\n            label: 'API'\n          },\n          {\n            type: 'doc',\n            docId: 'examples/index',\n            position: 'left',\n            label: 'Examples'\n          },\n          {\n            type: 'doc',\n            docId: 'plugins',\n            position: 'left',\n            label: 'Plugins'\n          },\n          {\n            href: 'https://stackoverflow.com/questions/tagged/chartist.js',\n            label: 'Stack Overflow',\n            position: 'right'\n          },\n          {\n            href: 'https://gitter.im/gionkunz/chartist-js',\n            label: 'Gitter',\n            position: 'right'\n          },\n          {\n            href: 'https://github.com/chartist-js/chartist/discussions',\n            label: 'Discussions',\n            position: 'right'\n          },\n          {\n            href: 'https://github.com/chartist-js/chartist',\n            label: 'GitHub',\n            position: 'right'\n          }\n        ]\n      },\n      colorMode: {\n        defaultMode: 'light',\n        disableSwitch: true,\n        respectPrefersColorScheme: false\n      },\n      prism: {\n        theme: codeTheme\n      }\n      // algolia: {\n      //   appId: '',\n      //   apiKey: '',\n      //   indexName: ''\n      // }\n    },\n\n  plugins: [\n    [\n      'docusaurus-plugin-typedoc',\n\n      // Plugin / TypeDoc options\n      {\n        entryPoints: ['../src/index.ts'],\n        tsconfig: '../tsconfig.json',\n        excludeExternals: true,\n        readme: 'none',\n        sort: ['source-order']\n      }\n    ]\n  ]\n};\n\nmodule.exports = config;\n"
  },
  {
    "path": "website/package.json",
    "content": "{\n  \"name\": \"website\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"docusaurus\": \"docusaurus\",\n    \"start\": \"docusaurus start\",\n    \"build\": \"docusaurus build\",\n    \"swizzle\": \"docusaurus swizzle\",\n    \"deploy\": \"docusaurus deploy\",\n    \"clear\": \"docusaurus clear\",\n    \"serve\": \"docusaurus serve\",\n    \"write-translations\": \"docusaurus write-translations\",\n    \"write-heading-ids\": \"docusaurus write-heading-ids\",\n    \"typecheck\": \"tsc\"\n  },\n  \"dependencies\": {\n    \"@algolia/client-search\": \"^4.11.0\",\n    \"@docusaurus/core\": \"2.0.0-beta.14\",\n    \"@docusaurus/preset-classic\": \"2.0.0-beta.14\",\n    \"@docusaurus/theme-search-algolia\": \"^2.0.0-beta.9\",\n    \"@mdx-js/react\": \"^1.6.21\",\n    \"@svgr/webpack\": \"^6.0.0\",\n    \"clsx\": \"^1.1.1\",\n    \"file-loader\": \"^6.2.0\",\n    \"git-branch\": \"^2.0.1\",\n    \"prism-react-renderer\": \"^1.2.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"url-loader\": \"^4.1.1\"\n  },\n  \"devDependencies\": {\n    \"@docusaurus/module-type-aliases\": \"2.0.0-beta.14\",\n    \"@tsconfig/docusaurus\": \"^1.0.4\",\n    \"@types/react\": \"^17.0.36\",\n    \"docusaurus-plugin-typedoc\": \"^0.17.4\",\n    \"typedoc\": \"^0.23.0\",\n    \"typedoc-plugin-markdown\": \"^3.12.1\",\n    \"typescript\": \"^4.3.5\",\n    \"webpack\": \"^5.64.2\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.5%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "website/sidebars.js",
    "content": "// @ts-check\n\nconst { docs } = require('./docs/docs');\nconst { docs: api } = require('./docs/api/docs');\nconst { docs: examples } = require('./docs/examples/docs');\n\n/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */\nconst sidebars = {\n  docsSidebar: [\n    {\n      type: 'doc',\n      id: 'index',\n      label: 'Quickstart'\n    },\n    ...docs.map(({ slug, title }) => ({\n      /** @type {'doc'} */\n      type: 'doc',\n      id: slug.replace('/docs/', ''),\n      label: title\n    }))\n  ],\n  apiSidebar: [\n    ...api.map(({ slug, title }) => ({\n      /** @type {'doc'} */\n      type: 'doc',\n      id: slug.replace('/', ''),\n      label: title\n    })),\n    {\n      type: 'doc',\n      id: 'api/index'\n    }\n  ],\n  examplesSidebar: [\n    {\n      type: 'doc',\n      id: 'examples/index',\n      label: 'Table of Contents'\n    },\n    ...examples.map(({ slug, title }) => ({\n      /** @type {'doc'} */\n      type: 'doc',\n      id: slug.replace('/', ''),\n      label: title\n    }))\n  ]\n};\n\nmodule.exports = sidebars;\n"
  },
  {
    "path": "website/src/components/ContextProvider.tsx",
    "content": "import { ReactNode } from 'react';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useThemeContext from '@theme/hooks/useThemeContext';\n\ninterface IContext {\n  branch: string;\n  theme: 'light' | 'dark';\n}\n\nexport default function ContextProvider({\n  children,\n}: {\n  children(context: IContext): ReactNode;\n}) {\n  const ctx = useDocusaurusContext();\n  const { isDarkTheme } = useThemeContext();\n  const context = {\n    branch: ctx.siteConfig.customFields.branch as string,\n    theme: isDarkTheme ? ('dark' as const) : ('light' as const),\n  };\n\n  return children(context);\n}\n"
  },
  {
    "path": "website/src/css/custom.css",
    "content": "/**\n * Any CSS included here will be global. The classic template\n * bundles Infima by default. Infima is a CSS framework designed to\n * work well for content-centric websites.\n */\n\n/* You can override the default Infima variables here. */\n:root {\n  --ifm-color-primary: #7a77ff;\n  --ifm-color-primary-dark: #5552ff;\n  --ifm-color-primary-darker: #433fff;\n  --ifm-color-primary-darkest: #0c07ff;\n  --ifm-color-primary-light: #9f9cff;\n  --ifm-color-primary-lighter: #b1afff;\n  --ifm-color-primary-lightest: #e8e7ff;\n  --ifm-code-font-size: 95%;\n}\n\n.docusaurus-highlight-code-line {\n  background-color: rgba(0, 0, 0, 0.1);\n  display: block;\n  margin: 0 calc(-1 * var(--ifm-pre-padding));\n  padding: 0 var(--ifm-pre-padding);\n}\n\nhtml[data-theme='dark'] .docusaurus-highlight-code-line {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n\n.logo {\n  float: right;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    float: none;\n    display: block;\n    margin: 0 auto;\n  }\n}\n"
  },
  {
    "path": "website/src/css/recoloring.css",
    "content": "/* palette */\n:root {\n  --brown-dark: #5B4421;\n  --red: #D70205;\n  --red_light: #F05B4F;\n  --white-dirty: #F7F2E9;\n  --white: #FFFFFF;\n  --brown-light: #e3d8c3;\n  --brown-lighter: #DFCFBB;\n  --brown-ligher_a08: #f7f2e980;\n  --brown-light_a02: rgba(68, 61, 63, 0.2);\n  --brown-darken: #443D3F;\n  --yellow: #f4c63e;\n\n  --dark: #363133;\n  --dark-01: #2e2929;\n  --dark_03_a01: rgba(247, 242, 233, 0.1);\n  --white_a02: rgba(255, 255, 255, 0.2);\n}\n\n\n:root[data-theme='light'] {\n  --accent: var(--red);\n\n  --text-primary: var(--brown-dark);\n  --text-link: var(--red);\n  --text_header: var(--white-dirty);\n\n  --bg_main: var(--brown-light);\n  --bg-highlithed: var(--brown-ligher_a08);\n  --bg-header: var(--brown-darken);\n  --bg_menu: var(--brown-lighter);\n\n  --separator: var(--brown-light_a02);\n}\n\n:root[data-theme='dark'] {\n  --accent: var(--red_light);\n\n  --text-primary: var(--white);\n  --text-link: var(--red_light);\n\n  --separator: var(--white_a02);\n\n  --text_header: var(--white-dirty);\n\n  --bg_main: var(--dark-01);\n  --bg-highlithed: var(--dark_03_a01);\n  --bg-header: var(--brown-darken);\n  --bg_menu: var(--dark);\n}\n\nhtml {\n  background-color: var(--bg_main) !important;\n  color: var(--text-primary) !important;\n}\n\na {\n  color: var(--text-link);\n}\n\na:hover {\n  color: var(--text-link);\n}\n\n/* nav */\n\n.navbar {\n  background-color: var(--bg-header);\n  color: var(--text_header);\n}\n\n.navbar a {\n  color: var(--white);\n}\n\n.menu__list-item a {\n  color: var(--text-primary);\n}\n\n.navbar .navbar__link:hover,\n.navbar .navbar__brand:hover {\n  color: var(--yellow);\n}\n\n.menu {\n  background-color: var(--bg_menu);\n}\n\n.menu__link {\n  color: var(--text-primary);\n}\n\n.menu__link:hover {\n  color: var(--text-link);\n  background-color: initial;\n}\n\n.menu__link.menu__link--active {\n  background-color: var(--bg-highlithed);\n}\n\n.table-of-contents {\n  border-left: 3px solid var(--separator);\n}\n\n.table-of-contents__link {\n  color: inherit;\n}\n\n.table-of-contents__link:hover {\n  color: var(--text-link);\n}\n\n.hash-link {\n  text-decoration: none;\n}\n\n.hash-link:hover {\n  text-decoration: underline currentColor;\n}\n\n.pagination-nav__link {\n  border-color: var(--separator);\n  transition: background-color 0.3s;\n}\n\n.pagination-nav__link:hover {\n  border-color: var(--separator);\n  background-color: var(--bg-highlithed);\n}\n\n.pagination-nav__sublabel {\n  color: var(--text-primary);\n}\n\n.alert {\n  background-color: var(--bg-highlithed);\n  border-color: var(--accent);\n  color: var(--text-primary);\n}\n\n.alert a {\n  text-decoration-color: currentColor;\n}\n\n.tabs__item--active {\n  color: var(--text-link);\n  border-color: var(--accent);\n}\n\n.tabs__item {\n  color: var(--text-primary);\n}\n\n.admonition-icon svg {\n  stroke: var(--accent);\n  fill: var(--accent);\n}\n\nhr {\n  border-color: var(--separator);\n}\n\ntable th, table td, table thead tr {\n  border-color: var(--separator);\n}\n\ncode {\n  background-color: var(--bg-highlithed);\n  border-color: var(--separator);\n}\n\ntable tr:nth-child(2n) {\n  background-color: var(--bg_menu);\n}\n\n.navbar__logo {\n  background-color: var(--yellow);\n  padding: 3px;\n  height: calc(2em + 6px);\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n\n.navbar-sidebar__back {\n  background-color: var(--bg-highlithed);\n  color: var(--text-primary);\n}\n\n.navbar-sidebar__brand {\n  background-color: var(--dark-01);\n}\n"
  },
  {
    "path": "website/src/prism-theme.js",
    "content": "module.exports = {\n  plain: {\n    color: '#f7f2ea',\n    backgroundColor: '#453D3F'\n  },\n  styles: [\n    {\n      types: ['prolog', 'constant', 'builtin'],\n      style: {\n        color: '#F05B4F'\n      }\n    },\n    {\n      types: ['inserted', 'function'],\n      style: {\n        color: '#F05B4F'\n      }\n    },\n    {\n      types: ['deleted'],\n      style: {\n        color: 'rgb(255, 85, 85)'\n      }\n    },\n    {\n      types: ['changed'],\n      style: {\n        color: 'rgb(255, 184, 108)'\n      }\n    },\n    {\n      types: ['punctuation', 'symbol'],\n      style: {\n        color: '#f7f2ea'\n      }\n    },\n    {\n      types: ['number'],\n      style: {\n        color: '#F4C63D'\n      }\n    },\n    {\n      types: ['string', 'char', 'tag', 'selector'],\n      style: {\n        color: '#F4C63D'\n      }\n    },\n    {\n      types: ['keyword', 'variable'],\n      style: {\n        color: '#F05B4F',\n        fontStyle: 'italic'\n      }\n    },\n    {\n      types: ['comment'],\n      style: {\n        color: '#7b6d70'\n      }\n    },\n    {\n      types: ['attr-name'],\n      style: {\n        color: '#F4C63D'\n      }\n    }\n  ]\n};\n"
  },
  {
    "path": "website/static/.nojekyll",
    "content": ""
  },
  {
    "path": "website/tsconfig.json",
    "content": "{\n  // This file is not used in compilation. It is here just for a nice editor experience.\n  \"extends\": \"@tsconfig/docusaurus/tsconfig.json\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\"\n  }\n}\n"
  }
]