[
{
"path": ".codeclimate.yml",
"content": "exclude_patterns:\n- \"packages/docs/src/data/\""
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n ignorePatterns: ['lib/dist/**/*'],\n extends: [\n 'standard',\n 'plugin:react/recommended',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:react-hooks/recommended',\n 'plugin:prettier/recommended'\n ],\n parser: '@typescript-eslint/parser',\n parserOptions: {\n ecmaVersion: '2020'\n },\n plugins: ['react', '@typescript-eslint', 'prettier'],\n rules: {\n camelcase: 'off',\n 'no-use-before-define': 'off',\n '@typescript-eslint/no-use-before-define': ['error'],\n 'prettier/prettier': [\n 'error',\n {\n tabWidth: 2,\n printWidth: 120,\n singleQuote: true,\n trailingComma: 'none',\n semi: false,\n overrides: [\n {\n files: '*.json',\n options: {\n parser: 'json'\n }\n },\n {\n files: '*.html',\n options: {\n parser: 'html'\n }\n },\n {\n files: '*.css',\n options: {\n parser: 'css'\n }\n },\n {\n files: '*.md',\n options: {\n parser: 'markdown'\n }\n }\n ]\n }\n ],\n 'import/order': 'error',\n 'react/react-in-jsx-scope': 'off',\n 'react/prop-types': 'off'\n },\n settings: {\n react: {\n version: 'detect'\n }\n }\n}\n"
},
{
"path": ".github/CODEOWNERS",
"content": "* @jens-ox\n"
},
{
"path": ".github/workflows/gh-pages.yml",
"content": "name: Deploy GitHub Pages\non:\n push:\n branches: [main]\n\njobs:\n build-and-deploy:\n name: Deploy to GitHub Pages\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: \"16\"\n cache: \"yarn\"\n - run: yarn\n - name: Build library\n run: yarn build\n working-directory: ./lib\n - name: Build frontend\n run: yarn build\n working-directory: ./app\n - name: Deploy\n uses: JamesIves/github-pages-deploy-action@v4.3.0\n with:\n branch: gh-pages\n folder: ./app/out"
},
{
"path": ".github/workflows/pr-gate.yml",
"content": "name: PR Gate\non:\n push:\n branches-ignore:\n - gh-pages\n\njobs:\n lint-lib:\n name: Lint Library\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: \"16\"\n cache: \"yarn\"\n - run: yarn\n - name: Run ESLint\n run: yarn lint\n working-directory: ./lib"
},
{
"path": ".github/workflows/publish.yml",
"content": "name: Publish Package to NPM\non:\n release:\n types: [created]\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: '16'\n registry-url: 'https://registry.npmjs.org'\n cache: 'yarn'\n - run: yarn\n - name: Build library\n run: yarn build\n working-directory: ./lib\n - run: npm publish\n working-directory: ./lib\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}"
},
{
"path": ".gitignore",
"content": "node_modules\n.vscode\n.DS_Store"
},
{
"path": "README.md",
"content": "[](https://metricsgraphicsjs.org)\n\n[](https://bundlephobia.com/result?p=mg2) [](https://codeclimate.com/github/jens-ox/metrics-graphics/maintainability) [](https://app.netlify.com/sites/affectionate-benz-6e3cf9/deploys)\n\n*MetricsGraphics* is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots and histograms, as well as features like rug plots.\n\n## Example\n\nAll you need to do is add an entry node to your document:\n\n```html\n\n```\n\nThen, use the id to mount the chart:\n\n```js\nimport LineChart from 'metrics-graphics'\n\nnew LineChart({\n data, // some array of data objects\n width: 600,\n height: 200,\n target: '#chart',\n area: true,\n xAccessor: 'date',\n yAccessor: 'value'\n})\n```\n\nThat's it!\n\n\n\nThe raw data for this example can be found [here](packages/examples/src/assets/data/ufoSightings.js)\n\n## Documentation\n\nIf you want to use *MetricsGraphics*, you can find the public API [here](packages/lib/docs/API.md).\n\nIf you want to extend *MetricsGraphics*, you can read up on the [components](packages/lib/docs/Components.md) and [utilities](packages/lib/docs/Utility.md).\n\n## Development Setup\n\nThis project uses [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/). Please make sure that Yarn is installed.\n\n```bash\n# clone and setup\ngit clone https://github.com/metricsgraphics/metrics-graphics\ncd metrics-graphics\nyarn install\n```\n\nRun both the development setup of the library and the development setup of the examples\n\n```bash\n# inside packages/lib\nyarn dev\n\n# inside packages/examples\nyarn dev\n```"
},
{
"path": "app/.gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\n"
},
{
"path": "app/README.md",
"content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
},
{
"path": "app/components/Layout.tsx",
"content": "import Head from 'next/head'\nimport { PropsWithChildren } from 'react'\n\ninterface LayoutProps {\n title: string\n}\n\nconst Layout: React.FC> = ({ title, children }) => (\n <>\n \n {title}\n \n {children}\n \n)\n\nexport default Layout\n"
},
{
"path": "app/components/Logo.tsx",
"content": "const Logo = () => (\n \n)\n\nexport default Logo\n"
},
{
"path": "app/components/NavLink.tsx",
"content": "import Link, { LinkProps } from 'next/link'\nimport { useRouter } from 'next/router'\nimport { PropsWithChildren } from 'react'\nimport cx from 'classnames'\n\nconst NavLink: React.FC> = ({ href, children, ...linkProps }) => {\n const router = useRouter()\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport default NavLink\n"
},
{
"path": "app/components/ParameterTable.tsx",
"content": "interface ParameterTableProps {\n props: Array<{\n name: string\n type: string\n default?: string\n description: string\n }>\n}\n\nconst ParameterTable: React.FC = ({ props }) => (\n
\n \n
\n
Name
\n
Type
\n
Default
\n
Description
\n
\n \n \n {props.map((p) => (\n
\n
{p.name}
\n
\n {p.type}\n
\n
{p.default ? {p.default} : '-'}
\n
{p.description}
\n
\n ))}\n \n
\n)\n\nexport default ParameterTable\n"
},
{
"path": "app/components/charts/Renderer.tsx",
"content": "import { MutableRefObject, PropsWithChildren, useEffect, useRef } from 'react'\n\ninterface RendererProps {\n chartRenderer: (chartRef: MutableRefObject) => unknown\n}\n\nconst Renderer: React.FC> = ({ chartRenderer, children }) => {\n const chartRef = useRef(null)\n\n // render chart\n useEffect(() => {\n // if react is still rendering, wait\n if (!chartRef.current) return\n\n // call render function with ref\n chartRenderer(chartRef.current)\n })\n\n return (\n
\n )\n}\n\nexport default MyApp\n"
},
{
"path": "app/pages/_document.tsx",
"content": "import Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n render() {\n return (\n \n \n \n \n \n \n \n \n \n )\n }\n}\n\nexport default MyDocument\n"
},
{
"path": "app/pages/histogram.mdx",
"content": "import Layout from '../components/Layout'\nimport ParameterTable from '../components/ParameterTable'\nimport Simple from '../components/charts/histogram/Simple'\n\n\n\n# Histograms\n\n## API\n\nExtends the [base chart options](./mg-api). All options below are optional.\n\n\n\n## Examples\n\n### Difference in UFO Sighting and Reporting Dates (in months)\n\nSemi-real data about the reported differences between the supposed sighting of a UFO and the date it was reported.\n\n\n\n```js\nnew HistogramChart({\n data: ufoData.map((date) => date / 30).sort(),\n width: 600,\n height: 200,\n binCount: 150,\n target: '#my-div',\n brush: 'x',\n yAxis: {\n extendedTicks: true\n },\n tooltipFunction: (bar) => `${bar.time} months, volume ${bar.count}`\n})\n```\n\n\n\n\n"
},
{
"path": "app/pages/index.tsx",
"content": "import type { NextPage } from 'next'\nimport Head from 'next/head'\nimport { useEffect, useRef } from 'react'\nimport { LineChart } from 'metrics-graphics'\nimport sightings from '../data/ufoSightings.json'\n\nconst Home: NextPage = () => {\n const chartRef = useRef(null)\n useEffect(() => {\n if (!chartRef.current) return\n const lineChart = new LineChart({\n data: [sightings],\n markers: [{ year: 1964, label: '\"The Creeping Terror\" released' }],\n width: 650,\n height: 180,\n target: chartRef.current as any,\n xAccessor: 'year',\n yAccessor: 'sightings',\n area: true,\n yScale: {\n minValue: 0\n },\n xAxis: {\n extendedTicks: true,\n label: 'Year',\n tickFormat: '.4r'\n },\n yAxis: {\n label: 'Count'\n }\n })\n }, [chartRef])\n return (\n
\n \n MetricsGraphics\n \n \n\n
\n MetricsGraphics is a library built on top of D3 that is optimized for visualizing and laying out time-series\n data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive\n way.\n
\n \n
\n )\n}\n\nexport default Home\n"
},
{
"path": "app/pages/line.mdx",
"content": "import ParameterTable from '../components/ParameterTable'\nimport Layout from '../components/Layout'\nimport Simple from '../components/charts/line/Simple'\nimport Confidence from '../components/charts/line/Confidence'\nimport Multi from '../components/charts/line/Multi'\nimport Aggregated from '../components/charts/line/Aggregated'\nimport Broken from '../components/charts/line/Broken'\nimport Active from '../components/charts/line/Active'\nimport Baseline from '../components/charts/line/Baseline'\n\n\n\n# Line Charts\n\n## API\n\nExtends the [base chart options](./mg-api). All options below are optional.\n\n | boolean',\n description: 'Specifies for which sub-array of data an area should be shown. If the chart is only one line, you can set it to true.'\n}, {\n name: 'confidenceBand',\n type: '[Accessor, Accessor]',\n description: 'Two-element array specifying how to access the lower (first) and upper (second) value for the confidence band. The two elements work like accessors (either a string or a function).'\n}, {\n name: 'voronoi',\n type: 'Partial',\n description: 'Custom parameters passed to the voronoi generator.'\n}, {\n name: 'defined',\n type: '(point: Data) => boolean',\n description: 'Function specifying whether or not to show a given datapoint. This is mainly used to create partially defined graphs.'\n}, {\n name: 'activeAccessor',\n type: 'Accessor',\n description: 'Accessor that defines whether or not a given data point should be shown as active'\n}, {\n name: 'activePoint',\n type: 'Partial',\n description: 'Custom parameters passed to the active point generator.'\n}]} />\n\n## Examples\n\n### Simple Line Chart\n\nThis is a simple line chart. You can remove the area portion by adding `area: false` to the arguments list.\n\n\n\n```js\nnew LineChart({\n data: [fakeUsers.map(({ date, value }) => ({ date: new Date(date), value }))],\n width: 600,\n height: 200,\n yScale: {\n minValue: 0\n },\n target: '#my-div',\n brush: 'xy',\n area: true,\n xAccessor: 'date',\n yAccessor: 'value',\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`\n})\n```\n\n\n\n### Confidence Band\n\nThis is an example of a graph with a confidence band and extended x-axis ticks enabled.\n\n\n\n```js\nnew LineChart({\n data: [\n confidence.map((entry) => ({\n ...entry,\n date: new Date(entry.date)\n }))\n ],\n xAxis: {\n extendedTicks: true\n },\n yAxis: {\n tickFormat: 'percentage'\n },\n width: 600,\n height: 200,\n target: '#my-div',\n confidenceBand: ['l', 'u'],\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatPercent(point.value)}`\n})\n```\n\n\n### Multiple Lines\n\nThis line chart contains multiple lines.\n\n\n```js\nnew LineChart({\n data: fakeUsers.map((fakeArray) =>\n fakeArray.map((fakeEntry) => ({\n ...fakeEntry,\n date: new Date(fakeEntry.date)\n }))\n ),\n width: 600,\n height: 200,\n target: '#my-div',\n xAccessor: 'date',\n yAccessor: 'value',\n legend: ['Line 1', 'Line 2', 'Line 3'],\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`\n})\n```\n\n\n### Aggregate Rollover\n\nOne rollover for all lines.\n\n\n\n```js\nnew LineChart({\n data: fakeUsers.map((fakeArray) =>\n fakeArray.map((fakeEntry) => ({\n ...fakeEntry,\n date: new Date(fakeEntry.date)\n }))\n ),\n width: 600,\n height: 200,\n target: '#my-div',\n xAccessor: 'date',\n yAccessor: 'value',\n legend: ['Line 1', 'Line 2', 'Line 3'],\n voronoi: {\n aggregate: true\n },\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`\n})\n```\n\n\n### Broken lines (missing data points)\n\nYou can hide individual data points on a particular attribute by setting the defined accessor (which has to return true for visible points). Data points whose y-accessor values are null are also hidden.\n\n\n\n```js\nnew LineChart({\n data: [missing.map((e) => ({ ...e, date: new Date(e.date) }))],\n width: 600,\n height: 200,\n target: '#my-div',\n defined: (d) => !d.dead,\n area: true,\n tooltipFunction: (point) => `${formatDate(point.date)}: ${point.value}`\n})\n```\n\n\n\n### Active Points\n\nThis line chart displays pre-defined active points.\n\n\n\n```js\nnew LineChart({\n data: [\n fakeUsers.map((entry, i) => ({\n ...entry,\n date: new Date(entry.date),\n active: i % 5 === 0\n }))\n ],\n width: 600,\n height: 200,\n target: '#my-div',\n activeAccessor: 'active',\n activePoint: {\n radius: 2\n },\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`\n})\n```\n\n\n### Baseline\n\nBaselines are horizontal lines that can added at arbitrary points.\n\n\n\n```js\nnew LineChart({\n data: [\n fakeUsers.map((entry) => ({\n ...entry,\n date: new Date(entry.date)\n }))\n ],\n baselines: [{ value: 160000000, label: 'a baseline' }],\n width: 600,\n height: 200,\n target: '#my-div',\n tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`\n})\n```\n\n\n\n"
},
{
"path": "app/pages/mg-api.mdx",
"content": "import ParameterTable from '../components/ParameterTable'\nimport Layout from '../components/Layout'\n\n\n\n# API\n\nAll MetricsGraphics charts are classes that can be instantiated with a set of parameters (e.g. `new LineChart({ ... })`). The chart is then mounted to the given `target` (see below), which is for example the `id` of an empty `div` in your DOM or a React `ref`.\n\n## Data formats\n\nMetricsGraphics assumes that your data is either an array of objects or an array of arrays of objects. For example, your data could look like this:\n\n```js\n[{\n date: '2020-02-01',\n value: 10\n}, {\n date: '2020-02-02',\n value: 12\n}]\n```\n\n## Common Parameters\n\nAll charts inherit from an abstract chart, which has the following parameters (optional parameters marked with `?`):\n\n',\n description: 'Data that is to be visualized.'\n}, {\n name: 'target',\n type: 'string',\n description: 'DOM node to which the graph will be mounted (compatible D3 selection or D3 selection specifier).'\n}, {\n name: 'width',\n type: 'number',\n description: 'Total width of the graph.'\n}, {\n name: 'height',\n type: 'number',\n description: 'Total height of the graph.'\n}, {\n name: 'markers?',\n type: 'Array',\n description: 'Markers that should be added to the chart. Each marker object should be accessible through the xAccessor and contain a label field.'\n}, {\n name: 'baselines?',\n type: 'Array',\n description: 'Baselines that should be added to the chart. Each baseline object should be accessible through the yAccessor and contain a label field.'\n}, {\n name: 'xAccessor?',\n type: 'string | Accessor',\n default: 'date',\n description: 'Either the name of the field that contains the x value or a function that receives a data object and returns its x value.'\n}, {\n name: 'yAccessor?',\n type: 'string | Accessor',\n default: 'value',\n description: 'Either the name of the field that contains the y value or a function that receives a data object and returns its y value.'\n}, {\n name: 'margin?',\n type: 'Margin',\n default: 'top: 10, left: 60, right: 20, bottom: 40',\n description: 'Margin around the chart for labels.'\n}, {\n name: 'buffer?',\n type: 'number',\n default: '10',\n description: 'Amount of buffer space between the axes and the actual graph.'\n}, {\n name: 'colors?',\n type: 'Array',\n default: 'd3.schemeCategory10',\n description: 'Custom color scheme for the graph.'\n}, {\n name: 'xScale?',\n type: 'Partial',\n description: 'Overwrite parameters of the auto-generated x scale.'\n}, {\n name: 'yScale?',\n type: 'Partial',\n description: 'Overwrite parameters of the auto-generated y scale.'\n}, {\n name: 'xAxis?',\n type: 'Partial',\n description: 'Overwrite parameters of the auto-generated x axis.'\n}, {\n name: 'yAxis?',\n type: 'Partial',\n description: 'Overwrite parameters of the auto-generated y axis.'\n}, {\n name: 'showTooltip?',\n type: 'boolean',\n default: 'true',\n description: 'Whether or not to show a tooltip.'\n}, {\n name: 'tooltipFunction',\n type: 'Accessor',\n description: 'Generate a custom tooltip string.'\n}, {\n name: 'legend?',\n type: 'Array',\n description: 'Used if data is an array of arrays. Names of the sub-arrays of data, used as legend labels.'\n}, {\n name: 'brush?',\n type: '\"xy\" | \"x\" | \"y\"',\n description: 'Adds either a one- or two-dimensional brush to the chart.'\n}]} />\n\n## Common Types\n\n```ts\ntype Accessor = (dataObject: X) => Y\n\ntype Margin = {\n left: number\n right: number\n bottom: number\n top: number\n}\n\ntype Scale = {\n type: 'linear' // this will be extended in the future\n range?: [number, number]\n domain?: [number, number]\n}\n\ntype Axis = {\n scale: Scale\n buffer: number\n show?: boolean\n orientation?: 'top' | 'bottom' | 'left' | 'right'\n label?: string\n labelOffset?: number\n top?: number\n left?: number\n \n // a function to format a given tick, or one of the standard types (date, number, percentage), or string for d3-format\n tickFormat?: TextFunction | AxisFormat | string\n\n // defaults to 3 for vertical and 6 for horizontal axes\n tickCount?: number\n\n compact?: boolean\n\n // tick label prefix\n prefix?: string\n\n // tick label suffix\n suffix?: string\n\n // overwrite d3's default tick lengths\n tickLength?: number\n\n // draw extended tick lines\n extendedTicks?: boolean\n}\n```\n\n"
},
{
"path": "app/pages/scatter.mdx",
"content": "import Layout from '../components/Layout'\nimport ParameterTable from '../components/ParameterTable'\nimport Simple from '../components/charts/scatter/Simple'\nimport Categories from '../components/charts/scatter/Categories'\nimport Complex from '../components/charts/scatter/Complex'\n\n\n\n# Scatterplots\n\n## API\n\nExtends the [base chart options](./mg-api). All options below are optional.\n\n 3'\n}, {\n name: 'xRug',\n type: 'boolean',\n description: 'Whether or not to generate a rug for the x axis.'\n}, {\n name: 'yRug',\n type: 'boolean',\n description: 'Whether or not to generate a rug for the y axis.'\n}]} />\n\n## Examples\n\n### Simple Scatterplot\n\nThis is an example scatterplot, in which we have enabled rug plots on the y-axis by setting the rug option to `true`.\n\n\n\n```js\nnew ScatterChart({\n data: [points1],\n width: 500,\n height: 200,\n target: '#my-div',\n xAccessor: 'x',\n yAccessor: 'y',\n brush: 'xy',\n xRug: true,\n tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}`\n})\n```\n\n\n\n### Multi-Category Scatterplot\n\nThis scatterplot contains data of multiple categories.\n\n\n\n```js\nnew ScatterChart({\n data: points2.map((x: any) => x.values),\n legend: points2.map((x: any) => x.key),\n width: 500,\n height: 200,\n xAccessor: 'x',\n yAccessor: 'y',\n yRug: true,\n target: '#my-div',\n tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}`\n})\n```\n\n\n### Scatterplot with Size and Color\n\nScatterplots have xAccessor, yAccessor and sizeAccessor.\n\n\n\n```js\nnew ScatterChart({\n data: points2.map((x: any) => x.values),\n legend: points2.map((x: any) => x.key),\n width: 500,\n height: 200,\n target: '#my-div',\n xAccessor: 'x',\n yAccessor: 'y',\n sizeAccessor: (x: any) => Math.abs(x.w) * 3,\n tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}: ${formatDecimal(point.w)}`\n})\n```\n \n\n\n\n"
},
{
"path": "app/postcss.config.js",
"content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n"
},
{
"path": "app/styles/globals.css",
"content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.token.prolog,\n.token.doctype,\n.token.cdata {\n @apply text-gray-700;\n}\n\n.token.comment {\n @apply text-gray-500;\n}\n\n.token.punctuation {\n @apply text-gray-700;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n @apply text-green-500;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n @apply text-purple-500;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n @apply text-yellow-500;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n @apply text-blue-500;\n}\n\n.token.function,\n.token.class-name {\n @apply text-pink-500;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n @apply text-yellow-500;\n}\n\ncode[class*='language-'],\npre[class*='language-'] {\n @apply text-gray-800;\n}\n\npre::-webkit-scrollbar {\n display: none;\n}\n\npre {\n @apply bg-gray-50;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}"
},
{
"path": "app/tailwind.config.js",
"content": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n typography: ({ theme }) => ({\n DEFAULT: {\n css: {\n pre: {\n backgroundColor: theme('colors.indigo[50]'),\n fontSize: '0.7rem'\n }\n }\n }\n }),\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans]\n }\n }\n },\n plugins: [require('@tailwindcss/typography')]\n}\n"
},
{
"path": "app/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n \"exclude\": [\"node_modules\"]\n}\n"
},
{
"path": "lib/.gitignore",
"content": "# Dependencies\nbower_components\nnode_modules\n\n# Logs\nnpm-debug.log\n\n# IDE\n.idea\n\n# FS\n.DS_Store\n\n# Others\nother/divider.psd\nother/htaccess.txt\nbare.html\nyarn.lock\nyarn-error.log\n\n# Dist files\ndist\nbuild\n"
},
{
"path": "lib/esbuild.mjs",
"content": "import esbuild from 'esbuild'\n\nconst baseConfig = {\n entryPoints: ['src/index.ts'],\n bundle: true,\n sourcemap: true,\n target: 'esnext'\n}\n\n// esm\nesbuild.build({\n ...baseConfig,\n outdir: 'dist/esm',\n splitting: true,\n format: 'esm'\n})\n\n// cjs\nesbuild.build({\n ...baseConfig,\n outdir: 'dist/cjs',\n format: 'cjs'\n})\n"
},
{
"path": "lib/package.json",
"content": "{\n \"name\": \"metrics-graphics\",\n \"version\": \"3.0.1\",\n \"description\": \"A library optimized for concise, principled data graphics and layouts\",\n \"main\": \"dist/cjs/index.js\",\n \"module\": \"dist/esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"scripts\": {\n \"ts-types\": \"tsc --emitDeclarationOnly --outDir dist\",\n \"build\": \"rimraf dist && concurrently \\\"node ./esbuild.mjs\\\" \\\"npm run ts-types\\\" && cp src/mg.css dist/mg.css\",\n \"lint\": \"eslint src\",\n \"test\": \"echo \\\"no tests set up, will do later\\\"\",\n \"analyze\": \"source-map-explorer dist/esm/index.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/metricsgraphics/metrics-graphics.git\"\n },\n \"files\": [\n \"dist\"\n ],\n \"keywords\": [\n \"metrics-graphics\",\n \"metricsgraphicsjs\",\n \"metricsgraphics\",\n \"metricsgraphics.js\",\n \"d3 charts\"\n ],\n \"author\": \"Mozilla\",\n \"contributors\": [\n \"Ali Almossawi\",\n \"Hamilton Ulmer\",\n \"William Lachance\",\n \"Jens Ochsenmeier\"\n ],\n \"license\": \"MPL-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/metricsgraphics/metrics-graphics/issues\"\n },\n \"engines\": {\n \"node\": \">=0.8.0\"\n },\n \"homepage\": \"http://metricsgraphicsjs.org\",\n \"dependencies\": {\n \"d3\": \"^7.4.4\"\n },\n \"devDependencies\": {\n \"@types/d3\": \"^7.1.0\",\n \"concurrently\": \"^7.2.0\",\n \"deepmerge\": \"^4.2.2\",\n \"esbuild\": \"^0.14.39\",\n \"rimraf\": \"^3.0.2\",\n \"source-map-explorer\": \"^2.5.2\"\n }\n}\n"
},
{
"path": "lib/src/charts/abstractChart.ts",
"content": "import { select, extent, max, brush as d3brush, brushX, brushY } from 'd3'\nimport { randomId, makeAccessorFunction } from '../misc/utility'\nimport Scale from '../components/scale'\nimport Axis, { IAxis, AxisOrientation } from '../components/axis'\nimport Tooltip from '../components/tooltip'\nimport Legend from '../components/legend'\nimport constants from '../misc/constants'\nimport Point, { IPoint } from '../components/point'\nimport {\n SvgD3Selection,\n AccessorFunction,\n Margin,\n GenericD3Selection,\n BrushType,\n DomainObject,\n Domain,\n LegendSymbol\n} from '../misc/typings'\n\ntype TooltipFunction = (datapoint: any) => string\n\nexport interface IAbstractChart {\n /** data that is to be visualized */\n data: Array\n\n /** DOM node to which the graph will be mounted (D3 selection or D3 selection specifier) */\n target: string\n\n /** total width of the graph */\n width: number\n\n /** total height of the graph */\n height: number\n\n /** markers that should be added to the chart. Each marker object should be accessible through the xAccessor and contain a label field */\n markers?: Array\n\n /** baselines that should be added to the chart. Each baseline object should be accessible through the yAccessor and contain a label field */\n baselines?: Array\n\n /** either name of the field that contains the x value or function that receives a data object and returns its x value */\n xAccessor?: string | AccessorFunction\n\n /** either name of the field that contains the y value or function that receives a data object and returns its y value */\n yAccessor?: string | AccessorFunction\n\n /** margins of the visualization for labels */\n margin?: Margin\n\n /** amount of buffer between the axes and the graph */\n buffer?: number\n\n /** custom color scheme for the graph */\n colors?: Array\n\n /** overwrite parameters of the auto-generated x scale */\n xScale?: Partial\n\n /** overwrite parameters of the auto-generated y scale */\n yScale?: Partial\n\n /** overwrite parameters of the auto-generated x axis */\n xAxis?: Partial\n\n /** overwrite parameters of the auto-generated y axis */\n yAxis?: Partial\n\n /** whether or not to show a tooltip */\n showTooltip?: boolean\n\n /** generate a custom tooltip string */\n tooltipFunction?: (datapoint: any) => string\n\n /** names of the sub-arrays of data, used as legend labels */\n legend?: Array\n\n /** add an optional brush */\n brush?: BrushType\n\n /** custom domain computations */\n computeDomains?: () => DomainObject\n}\n\n/**\n * This abstract chart class implements all functionality that is shared between all available chart types.\n */\nexport default abstract class AbstractChart {\n id: string\n\n // base chart fields\n data: Array\n markers: Array\n baselines: Array\n target: SvgD3Selection\n svg?: GenericD3Selection\n content?: GenericD3Selection\n container?: GenericD3Selection\n\n // accessors\n xAccessor: AccessorFunction\n yAccessor: AccessorFunction\n colors: Array\n\n // scales\n xDomain: Domain\n yDomain: Domain\n xScale: Scale\n yScale: Scale\n\n // axes\n xAxis?: Axis\n xAxisParams: any\n yAxis?: Axis\n yAxisParams: any\n\n // tooltip and legend stuff\n showTooltip: boolean\n tooltipFunction?: TooltipFunction\n tooltip?: Tooltip\n legend?: Array\n\n // dimensions\n width: number\n height: number\n\n // margins\n margin: Margin\n buffer: number\n\n // brush\n brush?: BrushType\n idleDelay = 350\n idleTimeout: unknown\n\n constructor({\n data,\n target,\n markers,\n baselines,\n xAccessor,\n yAccessor,\n margin,\n buffer,\n width,\n height,\n colors,\n xScale,\n yScale,\n xAxis,\n yAxis,\n showTooltip,\n tooltipFunction,\n legend,\n brush,\n computeDomains\n }: IAbstractChart) {\n // convert string accessors to functions if necessary\n this.xAccessor = makeAccessorFunction(xAccessor ?? 'date')\n this.yAccessor = makeAccessorFunction(yAccessor ?? 'value')\n\n // set parameters\n this.data = data\n this.target = select(target)\n this.markers = markers ?? []\n this.baselines = baselines ?? []\n this.legend = legend ?? this.legend\n this.brush = brush ?? undefined\n this.xAxisParams = xAxis ?? this.xAxisParams\n this.yAxisParams = yAxis ?? this.yAxisParams\n this.showTooltip = showTooltip ?? true\n this.tooltipFunction = tooltipFunction\n\n this.margin = margin ?? { top: 10, left: 60, right: 20, bottom: 40 }\n this.buffer = buffer ?? 10\n\n // set unique id for chart\n this.id = randomId()\n\n // compute dimensions\n this.width = width\n this.height = height\n\n // normalize color and colors arguments\n this.colors = colors ?? constants.defaultColors\n\n // clear target\n this.target.selectAll('*').remove()\n\n // attach base elements to svg\n this.mountSvg()\n\n // set up scales\n this.xScale = new Scale({ range: [0, this.innerWidth], ...xScale })\n this.yScale = new Scale({ range: [this.innerHeight, 0], ...yScale })\n\n // compute domains and set them\n const { x, y } = computeDomains ? computeDomains() : this.computeDomains()\n this.xDomain = x\n this.yDomain = y\n this.xScale.domain = x\n this.yScale.domain = y\n\n this.abstractRedraw()\n }\n\n /**\n * Draw the abstract chart.\n */\n abstractRedraw(): void {\n // if not drawn yet, abort\n if (!this.content) return\n\n // clear\n this.content.selectAll('*').remove()\n\n // set up axes if not disabled\n this.mountXAxis(this.xAxisParams)\n this.mountYAxis(this.yAxisParams)\n\n // pre-attach tooltip text container\n this.mountTooltip(this.showTooltip, this.tooltipFunction)\n\n // set up main container\n this.mountContainer()\n }\n\n /**\n * Draw the actual chart.\n * This is meant to be overridden by chart implementations.\n */\n abstract redraw(): void\n\n mountBrush(whichBrush?: BrushType): void {\n // if no brush is specified, there's nothing to mount\n if (!whichBrush) return\n\n // brush can only be mounted after content is set\n if (!this.content || !this.container) {\n console.error('error: content not set yet')\n return\n }\n\n const brush = whichBrush === 'x' ? brushX() : whichBrush === 'y' ? brushY() : d3brush()\n brush.on('end', ({ selection }) => {\n // if no content is set, do nothing\n if (!this.content) {\n console.error('error: content is not set yet')\n return\n }\n // compute domains and re-draw\n if (selection === null) {\n if (!this.idleTimeout) {\n this.idleTimeout = setTimeout(() => {\n this.idleTimeout = null\n }, 350)\n return\n }\n\n // set original domains\n this.xScale.domain = this.xDomain\n this.yScale.domain = this.yDomain\n } else {\n if (this.brush === 'x') {\n this.xScale.domain = [selection[0], selection[1]].map(this.xScale.scaleObject.invert)\n } else if (this.brush === 'y') {\n this.yScale.domain = [selection[0], selection[1]].map(this.yScale.scaleObject.invert)\n } else {\n this.xScale.domain = [selection[0][0], selection[1][0]].map(this.xScale.scaleObject.invert)\n this.yScale.domain = [selection[1][1], selection[0][1]].map(this.yScale.scaleObject.invert)\n }\n this.content.select('.brush').call((brush as any).move, null)\n }\n\n // re-draw abstract elements\n this.abstractRedraw()\n\n // re-draw specific chart\n this.redraw()\n })\n this.container.append('g').classed('brush', true).call(brush)\n }\n\n /**\n * Mount a new legend if necessary\n * @param {String} symbolType symbol type (circle, square, line)\n */\n mountLegend(symbolType: LegendSymbol): void {\n if (!this.legend || !this.legend.length) return\n const legend = new Legend({\n legend: this.legend,\n colorScheme: this.colors,\n symbolType\n })\n legend.mountTo(this.target)\n }\n\n /**\n * Mount new x axis.\n *\n * @param xAxis object that can be used to overwrite parameters of the auto-generated x {@link Axis}.\n */\n mountXAxis(xAxis: Partial): void {\n // axis only mountable after content is mounted\n if (!this.content) {\n console.error('error: content needs to be mounted first')\n return\n }\n\n if (typeof xAxis?.show !== 'undefined' && !xAxis.show) return\n this.xAxis = new Axis({\n scale: this.xScale,\n orientation: AxisOrientation.BOTTOM,\n top: this.bottom,\n left: this.left,\n height: this.innerHeight,\n buffer: this.buffer,\n ...xAxis\n })\n if (!xAxis?.tickFormat) this.computeXAxisType()\n\n // attach axis\n if (this.xAxis) this.xAxis.mountTo(this.content)\n }\n\n /**\n * Mount new y axis.\n *\n * @param yAxis object that can be used to overwrite parameters of the auto-generated y {@link Axis}.\n */\n mountYAxis(yAxis: Partial): void {\n // axis only mountable after content is mounted\n if (!this.content) {\n console.error('error: content needs to be mounted first')\n return\n }\n\n if (typeof yAxis?.show !== 'undefined' && !yAxis.show) return\n this.yAxis = new Axis({\n scale: this.yScale,\n orientation: AxisOrientation.LEFT,\n top: this.top,\n left: this.left,\n height: this.innerWidth,\n buffer: this.buffer,\n ...yAxis\n })\n if (!yAxis?.tickFormat) this.computeYAxisType()\n if (this.yAxis) this.yAxis.mountTo(this.content)\n }\n\n /**\n * Mount a new tooltip if necessary.\n *\n * @param showTooltip whether or not to show a tooltip.\n * @param tooltipFunction function that receives a data object and returns the string displayed as tooltip.\n */\n mountTooltip(showTooltip?: boolean, tooltipFunction?: TooltipFunction): void {\n // only mount of content is defined\n if (!this.content) {\n console.error('error: content is not defined yet')\n return\n }\n\n if (typeof showTooltip !== 'undefined' && !showTooltip) return\n this.tooltip = new Tooltip({\n top: this.buffer,\n left: this.width - 2 * this.buffer,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n textFunction: tooltipFunction,\n colors: this.colors,\n legend: this.legend\n })\n this.tooltip.mountTo(this.content)\n }\n\n /**\n * Mount the main container.\n */\n mountContainer(): void {\n // content needs to be mounted first\n if (!this.content) {\n console.error('content needs to be mounted first')\n return\n }\n\n const width = max(this.xScale.range)\n const height = max(this.yScale.range)\n\n if (!width || !height) {\n console.error(`error: width or height is null (width: \"${width}\", height: \"${height}\")`)\n return\n }\n\n this.container = this.content\n .append('g')\n .attr('transform', `translate(${this.left},${this.top})`)\n .attr('clip-path', `url(#mg-plot-window-${this.id})`)\n .append('g')\n .attr('transform', `translate(${this.buffer},${this.buffer})`)\n this.container\n .append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('opacity', 0)\n .attr('pointer-events', 'all')\n .attr('width', width)\n .attr('height', height)\n }\n\n /**\n * This method is called by the abstract chart constructor.\n * Append the local svg node to the specified target, if necessary.\n * Return existing svg node if it's already present.\n */\n mountSvg(): void {\n const svg = this.target.select('svg')\n\n // warn user if svg is not empty\n if (!svg.empty()) {\n console.warn('Warning: SVG is not empty. Rendering might be unnecessary.')\n }\n\n // clear svg\n svg.remove()\n\n this.svg = this.target.append('svg').classed('mg-graph', true).attr('width', this.width).attr('height', this.height)\n\n // prepare clip path\n this.svg.select('.mg-clip-path').remove()\n this.svg\n .append('defs')\n .attr('class', 'mg-clip-path')\n .append('clipPath')\n .attr('id', `mg-plot-window-${this.id}`)\n .append('svg:rect')\n .attr('width', this.width - this.margin.left - this.margin.right)\n .attr('height', this.height - this.margin.top - this.margin.bottom)\n\n // set viewbox\n this.svg.attr('viewBox', `0 0 ${this.width} ${this.height}`)\n\n // append content\n this.content = this.svg.append('g').classed('mg-content', true)\n }\n\n /**\n * If needed, charts can implement data normalizations, which are applied when instantiating a new chart.\n * TODO this is currently unused\n */\n // abstract normalizeData(): void\n\n /**\n * Usually, the domains of the chart's scales depend on the chart type and the passed data, so this should usually be overwritten by chart implementations.\n * @returns domains for x and y axis as separate properties.\n */\n computeDomains(): DomainObject {\n const flatData = this.data.flat()\n const x = extent(flatData, this.xAccessor)\n const y = extent(flatData, this.yAccessor)\n return { x: x as [number, number], y: y as [number, number] }\n }\n\n /**\n * Set tick format of the x axis.\n */\n computeXAxisType(): void {\n // abort if no x axis is used\n if (!this.xAxis) {\n console.error('error: no x axis set')\n return\n }\n\n const flatData = this.data.flat()\n const xValue = this.xAccessor(flatData[0])\n\n if (xValue instanceof Date) {\n this.xAxis.tickFormat = 'date'\n } else if (Number(xValue) === xValue) {\n this.xAxis.tickFormat = 'number'\n }\n }\n\n /**\n * Set tick format of the y axis.\n */\n computeYAxisType(): void {\n // abort if no y axis is used\n if (!this.yAxis) {\n console.error('error: no y axis set')\n return\n }\n\n const flatData = this.data.flat()\n const yValue = this.yAccessor(flatData[0])\n\n if (yValue instanceof Date) {\n this.yAxis.tickFormat = constants.axisFormat.date\n } else if (Number(yValue) === yValue) {\n this.yAxis.tickFormat = constants.axisFormat.number\n }\n }\n\n generatePoint(args: Partial): Point {\n return new Point({\n ...args,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n xScale: this.xScale,\n yScale: this.yScale\n })\n }\n\n get top(): number {\n return this.margin.top\n }\n\n get left(): number {\n return this.margin.left\n }\n\n get bottom(): number {\n return this.height - this.margin.bottom\n }\n\n // returns the pixel location of the respective side of the plot area.\n get plotTop(): number {\n return this.top + this.buffer\n }\n\n get plotLeft(): number {\n return this.left + this.buffer\n }\n\n get innerWidth(): number {\n return this.width - this.margin.left - this.margin.right - 2 * this.buffer\n }\n\n get innerHeight(): number {\n return this.height - this.margin.top - this.margin.bottom - 2 * this.buffer\n }\n}\n"
},
{
"path": "lib/src/charts/histogram.ts",
"content": "import { max, bin } from 'd3'\nimport Delaunay from '../components/delaunay'\nimport Rect from '../components/rect'\nimport { TooltipSymbol } from '../components/tooltip'\nimport { LegendSymbol, InteractionFunction } from '../misc/typings'\nimport AbstractChart, { IAbstractChart } from './abstractChart'\n\ninterface IHistogramChart extends IAbstractChart {\n binCount?: number\n}\n\n/**\n * Creates a new histogram graph.\n *\n * @param {Object} args argument object. See {@link AbstractChart} for general parameters.\n * @param {Number} [args.binCount] approximate number of bins that should be used for the histogram. Defaults to what d3.bin thinks is best.\n */\nexport default class HistogramChart extends AbstractChart {\n bins: Array\n rects?: Array\n delaunay?: any\n delaunayBar?: any\n _activeBar = -1\n\n constructor({ binCount, ...args }: IHistogramChart) {\n super({\n ...args,\n computeDomains: () => {\n // set up histogram\n const dataBin = bin()\n if (binCount) dataBin.thresholds(binCount)\n const bins = dataBin(args.data)\n\n // update domains\n return {\n x: [0, bins.length],\n y: [0, max(bins, (bin: Array) => +bin.length)!]\n }\n }\n })\n\n // set up histogram\n const dataBin = bin()\n if (binCount) dataBin.thresholds(binCount)\n this.bins = dataBin(this.data)\n\n this.redraw()\n }\n\n redraw(): void {\n // set up histogram rects\n this.mountRects()\n\n // set tooltip type\n if (this.tooltip) {\n this.tooltip.update({ legendObject: TooltipSymbol.SQUARE })\n this.tooltip.hide()\n }\n\n // generate delaunator\n this.mountDelaunay()\n\n // mount legend if any\n this.mountLegend(LegendSymbol.SQUARE)\n\n // mount brush if necessary\n this.mountBrush(this.brush)\n }\n\n /**\n * Mount the histogram rectangles.\n */\n mountRects(): void {\n this.rects = this.bins.map((bin) => {\n const rect = new Rect({\n data: bin,\n xScale: this.xScale,\n yScale: this.yScale,\n color: this.colors[0],\n fillOpacity: 0.5,\n strokeWidth: 0,\n xAccessor: (bin) => bin.x0,\n yAccessor: (bin) => bin.length,\n widthAccessor: (bin) => this.xScale.scaleObject(bin.x1)! - this.xScale.scaleObject(bin.x0)!,\n heightAccessor: (bin) => -bin.length\n })\n rect.mountTo(this.container!)\n return rect\n })\n }\n\n /**\n * Handle move events from the delaunay triangulation.\n *\n * @returns handler function.\n */\n onPointHandler(): InteractionFunction {\n return ([point]) => {\n this.activeBar = point.index\n\n // set tooltip if necessary\n if (!this.tooltip) return\n this.tooltip.update({ data: [point] })\n }\n }\n\n /**\n * Handle leaving the delaunay triangulation area.\n *\n * @returns handler function.\n */\n onLeaveHandler() {\n return () => {\n this.activeBar = -1\n if (this.tooltip) this.tooltip.hide()\n }\n }\n\n /**\n * Mount new delaunay triangulation.\n */\n mountDelaunay(): void {\n this.delaunayBar = new Rect({\n xScale: this.xScale,\n yScale: this.yScale,\n xAccessor: (bin) => bin.x0,\n yAccessor: (bin) => bin.length,\n widthAccessor: (bin) => bin.x1 - bin.x0,\n heightAccessor: (bin) => -bin.length\n })\n this.delaunay = new Delaunay({\n points: this.bins.map((bin) => ({\n x: (bin.x1 + bin.x0) / 2,\n y: 0,\n time: bin.x0,\n count: bin.length\n })),\n xAccessor: (d) => d.x,\n yAccessor: (d) => d.y,\n xScale: this.xScale,\n yScale: this.yScale,\n onPoint: this.onPointHandler(),\n onLeave: this.onLeaveHandler()\n })\n this.delaunay.mountTo(this.container)\n }\n\n get activeBar() {\n return this._activeBar\n }\n\n set activeBar(i: number) {\n // if rexts are not set yet, abort\n if (!this.rects) {\n console.error('error: can not set active bar, rects are empty')\n return\n }\n\n // if a bar was previously set, de-set it\n if (this._activeBar !== -1) {\n this.rects[this._activeBar].update({ fillOpacity: 0.5 })\n }\n\n // set state\n this._activeBar = i\n\n // set point to active\n if (i !== -1) this.rects[i].update({ fillOpacity: 1 })\n }\n}\n"
},
{
"path": "lib/src/charts/line.ts",
"content": "import Line from '../components/line'\nimport Area from '../components/area'\nimport constants from '../misc/constants'\nimport Delaunay, { IDelaunay } from '../components/delaunay'\nimport { makeAccessorFunction } from '../misc/utility'\nimport { AccessorFunction, LegendSymbol, InteractionFunction, EmptyInteractionFunction } from '../misc/typings'\nimport { IPoint } from '../components/point'\nimport { TooltipSymbol } from '../components/tooltip'\nimport AbstractChart, { IAbstractChart } from './abstractChart'\n\ntype ConfidenceBand = [AccessorFunction | string, AccessorFunction | string]\n\ninterface ILineChart extends IAbstractChart {\n /** specifies for which sub-array of data an area should be shown. Boolean if data is a simple array */\n area?: Array | boolean\n\n /** array with two elements specifying how to access the lower (first) and upper (second) value for the confidence band. The two elements work like accessors and are either a string or a function */\n confidenceBand?: ConfidenceBand\n\n /** custom parameters passed to the voronoi generator */\n voronoi?: Partial\n\n /** function specifying whether or not to show a given datapoint */\n defined?: (point: any) => boolean\n\n /** accessor specifying for a given data point whether or not to show it as active */\n activeAccessor?: AccessorFunction | string\n\n /** custom parameters passed to the active point generator. See {@see Point} for a list of parameters */\n activePoint?: Partial\n}\n\nexport default class LineChart extends AbstractChart {\n delaunay?: Delaunay\n defined?: (point: any) => boolean\n activeAccessor?: AccessorFunction\n activePoint?: Partial\n area?: Array | boolean\n confidenceBand?: ConfidenceBand\n delaunayParams?: Partial\n\n // one delaunay point per line\n delaunayPoints: Array = []\n\n constructor({ area, confidenceBand, voronoi, defined, activeAccessor, activePoint, ...args }: ILineChart) {\n super(args)\n\n // if data is not a 2d array, die\n if (!Array.isArray(args.data[0])) throw new Error('data is not a 2-dimensional array.')\n\n if (defined) this.defined = defined\n if (activeAccessor) this.activeAccessor = makeAccessorFunction(activeAccessor)\n this.activePoint = activePoint ?? this.activePoint\n this.area = area ?? this.area\n this.confidenceBand = confidenceBand ?? this.confidenceBand\n this.delaunayParams = voronoi ?? this.delaunayParams\n\n this.redraw()\n }\n\n redraw(): void {\n this.mountLines()\n this.mountActivePoints(this.activePoint ?? {})\n\n // generate areas if necessary\n this.mountAreas(this.area || false)\n\n // set tooltip type\n if (this.tooltip) {\n this.tooltip.update({ legendObject: TooltipSymbol.LINE })\n this.tooltip.hide()\n }\n\n // generate confidence band if necessary\n if (this.confidenceBand) {\n this.mountConfidenceBand(this.confidenceBand)\n }\n\n // add markers and baselines\n this.mountMarkers()\n this.mountBaselines()\n\n // set up delaunay triangulation\n this.mountDelaunay(this.delaunayParams ?? {})\n\n // mount legend if any\n this.mountLegend(LegendSymbol.LINE)\n\n // mount brush if necessary\n this.mountBrush(this.brush)\n }\n\n /**\n * Mount lines for each array of data points.\n */\n mountLines(): void {\n // abort if container is not defined yet\n if (!this.container) {\n console.error('error: container is not defined yet')\n return\n }\n\n // compute lines and delaunay points\n this.data.forEach((lineData, index) => {\n const line = new Line({\n data: lineData,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n xScale: this.xScale,\n yScale: this.yScale,\n color: this.colors[index],\n defined: this.defined\n })\n this.delaunayPoints[index] = this.generatePoint({ radius: 3 })\n line.mountTo(this.container!)\n })\n }\n\n /**\n * If an active accessor is specified, mount active points.\n * @param params custom parameters for point generation. See {@see Point} for a list of options.\n */\n mountActivePoints(params: Partial): void {\n // abort if container is not defined yet\n if (!this.container) {\n console.error('error: container is not defined yet')\n return\n }\n\n if (!this.activeAccessor) return\n this.data.forEach((pointArray, index) => {\n pointArray.filter(this.activeAccessor).forEach((data: any) => {\n const point = this.generatePoint({\n data,\n color: this.colors[index],\n radius: 3,\n ...params\n })\n point.mountTo(this.container!)\n })\n })\n }\n\n /**\n * Mount all specified areas.\n *\n * @param area specifies for which sub-array of data an area should be shown. Boolean if data is a simple array.\n */\n mountAreas(area: Array | boolean): void {\n if (typeof area === 'undefined') return\n\n let areas: Array = []\n const areaGenerator = (lineData: any, index: number) =>\n new Area({\n data: lineData,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n xScale: this.xScale,\n yScale: this.yScale,\n color: this.colors[index],\n defined: this.defined\n })\n\n // if area is boolean and truthy, generate areas for each line\n if (typeof area === 'boolean' && area) {\n areas = this.data.map(areaGenerator)\n\n // if area is array, only show areas for the truthy lines\n } else if (Array.isArray(area)) {\n areas = this.data.filter((lineData, index) => area[index]).map(areaGenerator)\n }\n\n // mount areas\n areas.forEach((area) => area.mountTo(this.container))\n }\n\n /**\n * Mount the confidence band specified by two accessors.\n *\n * @param lowerAccessor for the lower confidence bound. Either a string (specifying the property of the object representing the lower bound) or a function (returning the lower bound when given a data point).\n * @param upperAccessor for the upper confidence bound. Either a string (specifying the property of the object representing the upper bound) or a function (returning the upper bound when given a data point).\n */\n mountConfidenceBand([lowerAccessor, upperAccessor]: ConfidenceBand): void {\n // abort if container is not set\n if (!this.container) {\n console.error('error: container not defined yet')\n return\n }\n\n const confidenceBandGenerator = new Area({\n data: this.data[0], // confidence band only makes sense for one line\n xAccessor: this.xAccessor,\n y0Accessor: makeAccessorFunction(lowerAccessor),\n yAccessor: makeAccessorFunction(upperAccessor),\n xScale: this.xScale,\n yScale: this.yScale,\n color: '#aaa'\n })\n confidenceBandGenerator.mountTo(this.container)\n }\n\n /**\n * Mount markers, if any.\n */\n mountMarkers(): void {\n // abort if content is not set yet\n if (!this.content) {\n console.error('error: content container not set yet')\n return\n }\n\n const markerContainer = this.content.append('g').attr('transform', `translate(${this.left},${this.top})`)\n this.markers.forEach((marker) => {\n const x = this.xScale.scaleObject(this.xAccessor(marker))\n markerContainer\n .append('line')\n .classed('line-marker', true)\n .attr('x1', x!)\n .attr('x2', x!)\n .attr('y1', this.yScale.range[0] + this.buffer)\n .attr('y2', this.yScale.range[1] + this.buffer)\n markerContainer.append('text').classed('text-marker', true).attr('x', x!).attr('y', 8).text(marker.label)\n })\n }\n\n mountBaselines(): void {\n // abort if content is not set yet\n if (!this.content) {\n console.error('error: content container not set yet')\n return\n }\n\n const baselineContainer = this.content.append('g').attr('transform', `translate(${this.left},${this.top})`)\n this.baselines.forEach((baseline) => {\n const y = this.yScale.scaleObject(this.yAccessor(baseline))\n baselineContainer\n .append('line')\n .classed('line-baseline', true)\n .attr('x1', this.xScale.range[0] + this.buffer)\n .attr('x2', this.xScale.range[1] + this.buffer)\n .attr('y1', y!)\n .attr('y2', y!)\n baselineContainer\n .append('text')\n .classed('text-baseline', true)\n .attr('x', this.xScale.range[1] + this.buffer)\n .attr('y', y! - 2)\n .text(baseline.label)\n })\n }\n\n /**\n * Handle incoming points from the delaunay move handler.\n *\n * @returns handler function.\n */\n onPointHandler(): InteractionFunction {\n return (points) => {\n // pre-hide all points\n this.delaunayPoints.forEach((dp) => dp.dismount())\n\n points.forEach((point) => {\n const index = point.arrayIndex || 0\n\n // set hover point\n this.delaunayPoints[index].update({\n data: point,\n color: this.colors[index]\n })\n this.delaunayPoints[index].mountTo(this.container)\n })\n\n // set tooltip if necessary\n if (!this.tooltip) return\n this.tooltip.update({ data: points })\n }\n }\n\n /**\n * Handles leaving the delaunay area.\n *\n * @returns handler function.\n */\n onLeaveHandler(): EmptyInteractionFunction {\n return () => {\n this.delaunayPoints.forEach((dp) => dp.dismount())\n if (this.tooltip) this.tooltip.hide()\n }\n }\n\n /**\n * Mount a new delaunay triangulation instance.\n *\n * @param customParameters custom parameters for {@link Delaunay}.\n */\n mountDelaunay(customParameters: Partial): void {\n // abort if container is not set yet\n if (!this.container) {\n console.error('error: container not set yet')\n return\n }\n\n this.delaunay = new Delaunay({\n points: this.data,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n xScale: this.xScale,\n yScale: this.yScale,\n onPoint: this.onPointHandler(),\n onLeave: this.onLeaveHandler(),\n defined: this.defined,\n ...customParameters\n })\n this.delaunay.mountTo(this.container)\n }\n\n computeYAxisType(): void {\n // abort if no y axis is used\n if (!this.yAxis) {\n console.error('error: no y axis set')\n return\n }\n\n const flatData = this.data.flat()\n const yValue = this.yAccessor(flatData[0])\n\n if (yValue instanceof Date) {\n this.yAxis.tickFormat = constants.axisFormat.date\n } else if (Number(yValue) === yValue) {\n this.yAxis.tickFormat = constants.axisFormat.number\n }\n }\n}\n"
},
{
"path": "lib/src/charts/scatter.ts",
"content": "import Delaunay from '../components/delaunay'\nimport Rug, { RugOrientation } from '../components/rug'\nimport { makeAccessorFunction } from '../misc/utility'\nimport { AccessorFunction, LegendSymbol, InteractionFunction, EmptyInteractionFunction } from '../misc/typings'\nimport Point from '../components/point'\nimport { TooltipSymbol } from '../components/tooltip'\nimport AbstractChart, { IAbstractChart } from './abstractChart'\n\ninterface IScatterChart extends IAbstractChart {\n /** accessor specifying the size of a data point. Can be either a string (name of the size field) or a function (receiving a data point and returning its size) */\n sizeAccessor?: string | AccessorFunction\n\n /** whether or not to generate a rug for the x axis */\n xRug?: boolean\n\n /** whether or not to generate a rug for the x axis */\n yRug?: boolean\n}\n\ninterface ActivePoint {\n i: number\n j: number\n}\n\nexport default class ScatterChart extends AbstractChart {\n points?: Array\n delaunay?: Delaunay\n delaunayPoint?: Point\n sizeAccessor: AccessorFunction\n showXRug: boolean\n xRug?: Rug\n showYRug: boolean\n yRug?: Rug\n _activePoint: ActivePoint = { i: -1, j: -1 }\n\n constructor({ sizeAccessor, xRug, yRug, ...args }: IScatterChart) {\n super(args)\n this.showXRug = xRug ?? false\n this.showYRug = yRug ?? false\n\n this.sizeAccessor = sizeAccessor ? makeAccessorFunction(sizeAccessor) : () => 3\n\n this.redraw()\n }\n\n redraw(): void {\n // set up rugs if necessary\n this.mountRugs()\n\n // set tooltip type\n if (this.tooltip) {\n this.tooltip.update({ legendObject: TooltipSymbol.CIRCLE })\n this.tooltip.hide()\n }\n\n // set up points\n this.mountPoints()\n\n // generate delaunator\n this.mountDelaunay()\n\n // mount legend if any\n this.mountLegend(LegendSymbol.CIRCLE)\n\n // mount brush if necessary\n this.mountBrush(this.brush)\n }\n\n /**\n * Mount new rugs.\n */\n mountRugs(): void {\n // if content is not set yet, abort\n if (!this.content) {\n console.error('error: content not set yet')\n return\n }\n\n if (this.showXRug) {\n this.xRug = new Rug({\n accessor: this.xAccessor,\n scale: this.xScale,\n colors: this.colors,\n data: this.data,\n left: this.plotLeft,\n top: this.innerHeight + this.plotTop + this.buffer,\n orientation: RugOrientation.HORIZONTAL // TODO how to pass tickLength etc?\n })\n this.xRug.mountTo(this.content)\n }\n if (this.showYRug) {\n this.yRug = new Rug({\n accessor: this.yAccessor,\n scale: this.yScale,\n colors: this.colors,\n data: this.data,\n left: this.left,\n top: this.plotTop,\n orientation: RugOrientation.VERTICAL\n })\n this.yRug.mountTo(this.content)\n }\n }\n\n /**\n * Mount scatter points.\n */\n mountPoints(): void {\n // if container is not set yet, abort\n if (!this.container) {\n console.error('error: container not set yet')\n return\n }\n\n this.points = this.data.map((pointSet, i) =>\n pointSet.map((data: any) => {\n const point = this.generatePoint({\n data,\n color: this.colors[i],\n radius: this.sizeAccessor(data) as number,\n fillOpacity: 0.3,\n strokeWidth: 1\n })\n point.mountTo(this.container!)\n return point\n })\n )\n }\n\n /**\n * Handle incoming points from the delaunay triangulation.\n *\n * @returns handler function\n */\n onPointHandler(): InteractionFunction {\n return ([point]) => {\n this.activePoint = { i: point.arrayIndex ?? 0, j: point.index }\n\n // set tooltip if necessary\n if (!this.tooltip) return\n this.tooltip.update({ data: [point] })\n }\n }\n\n /**\n * Handle leaving the delaunay area.\n *\n * @returns handler function\n */\n onLeaveHandler(): EmptyInteractionFunction {\n return () => {\n this.activePoint = { i: -1, j: -1 }\n if (this.tooltip) this.tooltip.hide()\n }\n }\n\n /**\n * Mount new delaunay triangulation instance.\n */\n mountDelaunay(): void {\n // if container is not set yet, abort\n if (!this.container) {\n console.error('error: container not set yet')\n return\n }\n\n this.delaunayPoint = this.generatePoint({ radius: 3 })\n this.delaunay = new Delaunay({\n points: this.data,\n xAccessor: this.xAccessor,\n yAccessor: this.yAccessor,\n xScale: this.xScale,\n yScale: this.yScale,\n nested: true,\n onPoint: this.onPointHandler(),\n onLeave: this.onLeaveHandler()\n })\n this.delaunay.mountTo(this.container)\n }\n\n get activePoint() {\n return this._activePoint\n }\n\n set activePoint({ i, j }: ActivePoint) {\n // abort if points are not set yet\n if (!this.points) {\n console.error('error: cannot set point, as points are not set')\n return\n }\n\n // if a point was previously set, de-set it\n if (this._activePoint.i !== -1 && this._activePoint.j !== -1) {\n this.points[this._activePoint.i][this._activePoint.j].update({\n fillOpacity: 0.3\n })\n }\n\n // set state\n this._activePoint = { i, j }\n\n // set point to active\n if (i !== -1 && j !== -1) this.points[i][j].update({ fillOpacity: 1 })\n }\n}\n"
},
{
"path": "lib/src/components/abstractShape.ts",
"content": "import { SvgD3Selection } from '../misc/typings'\nimport Scale from './scale'\n\nexport interface IAbstractShape {\n /** datapoint used to generate shape */\n data?: any\n\n /** scale used to compute x values */\n xScale: Scale\n\n /** scale used to compute y values */\n yScale: Scale\n\n /** color used for fill and strokes */\n color?: string\n\n /** opacity of the shape fill */\n fillOpacity?: number\n\n /** width of the stroke around the shape */\n strokeWidth?: number\n}\n\nexport default abstract class AbstractShape {\n data: any\n shapeObject: any\n xScale: Scale\n yScale: Scale\n color: string\n fillOpacity = 1\n strokeWidth = 0\n\n constructor({ data, xScale, yScale, color, fillOpacity, strokeWidth }: IAbstractShape) {\n this.data = data\n this.xScale = xScale\n this.yScale = yScale\n this.color = color ?? 'black'\n this.fillOpacity = fillOpacity ?? this.fillOpacity\n this.strokeWidth = strokeWidth ?? this.strokeWidth\n }\n\n /**\n * Render the shape and mount it to the given node.\n * Implemented by classes extending AbstractShape.\n *\n * @param svg D3 node to mount the shape to\n */\n abstract mountTo(svg: SvgD3Selection): void\n\n /**\n * Hide the shape by setting the opacity to 0. This doesn't remove the shape.\n */\n hide(): void {\n if (this.shapeObject) this.shapeObject.attr('opacity', 0)\n }\n\n /**\n * Update the given parameters of the object.\n * Implemented by classes extending AbstractShape.\n *\n * @param args parameters to be updated\n */\n abstract update(args: any): void\n\n /**\n * Update generic properties of the shape.\n * This method can be used in the implementations of {@link AbstractShape#update}.\n *\n * @param color new color of the shape.\n * @param fillOpacity new fill opacity of the shape.\n * @param strokeWidth new stroke width of the shape.\n */\n updateGeneric({\n color,\n fillOpacity,\n strokeWidth\n }: Pick): void {\n if (color) this.updateColor(color)\n if (fillOpacity) this.updateOpacity(fillOpacity)\n if (strokeWidth) this.updateStroke(strokeWidth)\n }\n\n /**\n * Update the color of the shape.\n *\n * @param color new color of the shape.\n */\n updateColor(color: string): void {\n this.color = color\n this.updateProp('fill', color)\n }\n\n /**\n * Update the fill opacity of the shape.\n *\n * @param fillOpacity new fill opacity of the shape.\n */\n updateOpacity(fillOpacity: number): void {\n this.fillOpacity = fillOpacity\n this.updateProp('fill-opacity', fillOpacity)\n }\n\n /**\n * Update the stroke width of the shape.\n *\n * @param strokeWidth new stroke width of the shape.\n */\n updateStroke(strokeWidth: number): void {\n this.strokeWidth = strokeWidth\n this.updateProp('stroke-width', strokeWidth)\n }\n\n /**\n * Update an attribute of the raw shape node.\n *\n * @param name attribute name\n * @param value new value\n */\n updateProp(name: string, value: number | string): void {\n if (this.shapeObject) this.shapeObject.attr(name, value)\n }\n\n /**\n * Remove the shape.\n */\n dismount(): void {\n if (this.shapeObject) this.shapeObject.remove()\n }\n}\n"
},
{
"path": "lib/src/components/area.ts",
"content": "import { area, curveCatmullRom, CurveFactory } from 'd3'\nimport { AccessorFunction, DefinedFunction, SvgD3Selection } from '../misc/typings'\nimport Scale from './scale'\n\ninterface IArea {\n /** data for which the area should be created */\n data: Array\n\n /** x accessor function */\n xAccessor: AccessorFunction\n\n /** y accessor function */\n yAccessor: AccessorFunction\n\n /** y base accessor function (defaults to 0) */\n y0Accessor?: AccessorFunction\n\n /** alternative to yAccessor */\n y1Accessor?: AccessorFunction\n\n /** scale used to scale elements in x direction */\n xScale: Scale\n\n /** scale used to scale elements in y direction */\n yScale: Scale\n\n /** curving function. See {@link https://github.com/d3/d3-shape#curves} for available curves in d3 */\n curve?: CurveFactory\n\n /** color of the area */\n color?: string\n\n /** specifies whether or not to show a given datapoint */\n defined?: DefinedFunction\n}\n\nexport default class Area {\n data: Array\n areaObject?: any\n index = 0\n color = 'none'\n\n constructor({ data, xAccessor, yAccessor, y0Accessor, y1Accessor, xScale, yScale, curve, color, defined }: IArea) {\n this.data = data\n this.color = color ?? this.color\n\n const y0 = y0Accessor ?? ((d) => 0)\n const y1 = y1Accessor ?? yAccessor\n\n // set up line object\n this.areaObject = area()\n .defined((d) => {\n if (y0(d) === null || y1(d) === null) return false\n return !defined ? true : defined(d)\n })\n .x((d) => xScale.scaleObject(xAccessor(d)))\n .y1((d) => yScale.scaleObject(y1(d)))\n .y0((d) => yScale.scaleObject(y0(d)))\n .curve(curve ?? curveCatmullRom)\n }\n\n /**\n * Mount the area to a given d3 node.\n *\n * @param svg d3 node to mount the area to.\n */\n mountTo(svg: SvgD3Selection): void {\n svg.append('path').classed('mg-area', true).attr('fill', this.color).datum(this.data).attr('d', this.areaObject)\n }\n}\n"
},
{
"path": "lib/src/components/axis.ts",
"content": "import { axisTop, axisLeft, axisRight, axisBottom, format, timeFormat } from 'd3'\nimport constants from '../misc/constants'\nimport { GD3Selection, LineD3Selection, TextD3Selection, TextFunction } from '../misc/typings'\nimport Scale from './scale'\n\nconst DEFAULT_VERTICAL_OFFSET = 35\nconst DEFAULT_HORIZONTAL_OFFSET = 45\n\ntype NumberFormatFunction = (x: number) => string\ntype DateFormatFunction = (x: Date) => string\ntype FormatFunction = NumberFormatFunction | DateFormatFunction\n\nexport enum AxisOrientation {\n TOP = 'top',\n BOTTOM = 'bottom',\n RIGHT = 'right',\n LEFT = 'left'\n}\n\nenum AxisFormat {\n DATE = 'date',\n NUMBER = 'number',\n PERCENTAGE = 'percentage'\n}\n\nexport interface IAxis {\n /** scale of the axis */\n scale: Scale\n\n /** buffer used by the chart, necessary to compute margins */\n buffer: number\n\n /** whether or not to show the axis */\n show?: boolean\n\n /** orientation of the axis */\n orientation?: AxisOrientation\n\n /** optional label to place beside the axis */\n label?: string\n\n /** offset between label and axis */\n labelOffset?: number\n\n /** translation from the top of the chart's box to render the axis */\n top?: number\n\n /** translation from the left of the chart's to render the axis */\n left?: number\n\n /** can be 1) a function to format a given tick or a specifier, or 2) one of the available standard formatting types (date, number, percentage) or a string for d3-format */\n tickFormat?: TextFunction | AxisFormat | string\n\n /** number of ticks to render, defaults to 3 for vertical and 6 for horizontal axes */\n tickCount?: number\n\n /** whether or not to render a compact version of the axis (clamps the main axis line at the outermost ticks) */\n compact?: boolean\n\n /** prefix for tick labels */\n prefix?: string\n\n /** suffix for tick labels */\n suffix?: string\n\n /** overwrite d3's default tick lengths */\n tickLength?: number\n\n /** draw extended ticks into the graph (used to make a grid) */\n extendedTicks?: boolean\n\n /** if extended ticks are used, this parameter specifies the inner length of ticks */\n height?: number\n}\n\nexport default class Axis {\n label = ''\n labelOffset = 0\n top = 0\n left = 0\n scale: Scale\n orientation = AxisOrientation.BOTTOM\n axisObject: any\n compact = false\n extendedTicks = false\n buffer = 0\n height = 0\n prefix = ''\n suffix = ''\n\n constructor({\n orientation,\n label,\n labelOffset,\n top,\n left,\n height,\n scale,\n tickFormat,\n tickCount,\n compact,\n buffer,\n prefix,\n suffix,\n tickLength,\n extendedTicks\n }: IAxis) {\n this.scale = scale\n this.label = label ?? this.label\n this.buffer = buffer ?? this.buffer\n this.top = top ?? this.top\n this.left = left ?? this.left\n this.height = height ?? this.height\n this.orientation = orientation ?? this.orientation\n this.compact = compact ?? this.compact\n this.prefix = prefix ?? this.prefix\n this.suffix = suffix ?? this.suffix\n if (typeof tickLength !== 'undefined') this.tickLength = tickLength\n this.extendedTicks = extendedTicks ?? this.extendedTicks\n this.setLabelOffset(labelOffset)\n\n this.setupAxisObject()\n\n // set or compute tickFormat\n if (tickFormat) this.tickFormat = tickFormat\n this.tickCount = tickCount ?? (this.isVertical ? 3 : 6)\n }\n\n /**\n * Set the label offset.\n *\n * @param labelOffset offset of the label.\n */\n setLabelOffset(labelOffset?: number): void {\n this.labelOffset =\n typeof labelOffset !== 'undefined'\n ? labelOffset\n : this.isVertical\n ? DEFAULT_HORIZONTAL_OFFSET\n : DEFAULT_VERTICAL_OFFSET\n }\n\n /**\n * Set up the main axis object.\n */\n setupAxisObject(): void {\n switch (this.orientation) {\n case constants.axisOrientation.top:\n this.axisObject = axisTop(this.scale.scaleObject)\n break\n case constants.axisOrientation.left:\n this.axisObject = axisLeft(this.scale.scaleObject)\n break\n case constants.axisOrientation.right:\n this.axisObject = axisRight(this.scale.scaleObject)\n break\n default:\n this.axisObject = axisBottom(this.scale.scaleObject)\n break\n }\n }\n\n /**\n * Get the domain object call function.\n * @returns that mounts the domain when called.\n */\n domainObject() {\n return (g: GD3Selection): LineD3Selection =>\n g\n .append('line')\n .classed('domain', true)\n .attr('x1', this.isVertical ? 0.5 : this.compact ? this.buffer : 0)\n .attr('x2', this.isVertical ? 0.5 : this.compact ? this.scale.range[1] : this.scale.range[1] + 2 * this.buffer)\n .attr('y1', this.isVertical ? (this.compact ? this.top + 0.5 : 0.5) : 0)\n .attr(\n 'y2',\n this.isVertical ? (this.compact ? this.scale.range[0] + 0.5 : this.scale.range[0] + 2 * this.buffer + 0.5) : 0\n )\n }\n\n /**\n * Get the label object call function.\n * @returns {Function} that mounts the label when called.\n */\n labelObject(): (node: GD3Selection) => TextD3Selection {\n const value = Math.abs(this.scale.range[0] - this.scale.range[1]) / 2\n const xValue = this.isVertical ? -this.labelOffset : value\n const yValue = this.isVertical ? value : this.labelOffset\n return (g) =>\n g\n .append('text')\n .attr('x', xValue)\n .attr('y', yValue)\n .attr('text-anchor', 'middle')\n .classed('label', true)\n .attr('transform', this.isVertical ? `rotate(${-90} ${xValue},${yValue})` : '')\n .text(this.label)\n }\n\n get isVertical(): boolean {\n return [constants.axisOrientation.left, constants.axisOrientation.right].includes(this.orientation)\n }\n\n get innerLeft(): number {\n return this.isVertical ? 0 : this.buffer\n }\n\n get innerTop(): number {\n return this.isVertical ? this.buffer : 0\n }\n\n get tickAttribute(): string {\n return this.isVertical ? 'x1' : 'y1'\n }\n\n get extendedTickLength(): number {\n const factor = this.isVertical ? 1 : -1\n return factor * (this.height + 2 * this.buffer)\n }\n\n /**\n * Mount the axis to the given d3 node.\n * @param svg d3 node.\n */\n mountTo(svg: GD3Selection): void {\n // set up axis container\n const axisContainer = svg\n .append('g')\n .attr('transform', `translate(${this.left},${this.top})`)\n .classed('mg-axis', true)\n\n // if no extended ticks are used, draw the domain line\n if (!this.extendedTicks) axisContainer.call(this.domainObject())\n\n // mount axis but remove default-generated domain\n axisContainer\n .append('g')\n .attr('transform', `translate(${this.innerLeft},${this.innerTop})`)\n .call(this.axisObject)\n .call((g) => g.select('.domain').remove())\n\n // if necessary, make ticks longer\n if (this.extendedTicks) {\n axisContainer.call((g) =>\n g.selectAll('.tick line').attr(this.tickAttribute, this.extendedTickLength).attr('opacity', 0.3)\n )\n }\n\n // if necessary, add label\n if (this.label !== '') axisContainer.call(this.labelObject())\n }\n\n /**\n * Compute the time formatting function based on the time domain.\n * @returns d3 function for formatting time.\n */\n diffToTimeFormat(): FormatFunction {\n const diff = Math.abs(this.scale.domain[1] - this.scale.domain[0]) / 1000\n\n const millisecondDiff = diff < 1\n const secondDiff = diff < 60\n const dayDiff = diff / (60 * 60) < 24\n const fourDaysDiff = diff / (60 * 60) < 24 * 4\n const manyDaysDiff = diff / (60 * 60 * 24) < 60\n const manyMonthsDiff = diff / (60 * 60 * 24) < 365\n\n return millisecondDiff\n ? timeFormat('%M:%S.%L')\n : secondDiff\n ? timeFormat('%M:%S')\n : dayDiff\n ? timeFormat('%H:%M')\n : fourDaysDiff || manyDaysDiff || manyMonthsDiff\n ? timeFormat('%b %d')\n : timeFormat('%Y')\n }\n\n /**\n * Get the d3 number formatting function for an abstract number type.\n *\n * @param formatType abstract format to be converted (number, date, percentage)\n * @returns d3 formatting function for the given abstract number type.\n */\n stringToFormat(formatType: AxisFormat | string): FormatFunction {\n switch (formatType) {\n case constants.axisFormat.number:\n return this.isVertical ? format('~s') : format('')\n case constants.axisFormat.date:\n return this.diffToTimeFormat()\n case constants.axisFormat.percentage:\n return format('.0%')\n default:\n return format(formatType)\n }\n }\n\n get tickFormat() {\n return this.axisObject.tickFormat()\n }\n\n set tickFormat(tickFormat: FormatFunction | string) {\n // if tickFormat is a function, apply it directly\n const formatFunction = typeof tickFormat === 'function' ? tickFormat : this.stringToFormat(tickFormat)\n\n this.axisObject.tickFormat((d: any) => `${this.prefix}${formatFunction(d)}${this.suffix}`)\n }\n\n get tickCount() {\n return this.axisObject.ticks()\n }\n\n set tickCount(tickCount: number) {\n this.axisObject.ticks(tickCount)\n }\n\n get tickLength() {\n return this.axisObject.tickSize()\n }\n\n set tickLength(length: number) {\n this.axisObject.tickSize(length)\n }\n}\n"
},
{
"path": "lib/src/components/delaunay.ts",
"content": "import { Delaunay as DelaunayObject, pointer } from 'd3'\nimport {\n AccessorFunction,\n InteractionFunction,\n EmptyInteractionFunction,\n DefinedFunction,\n GenericD3Selection\n} from '../misc/typings'\nimport Scale from './scale'\n\nexport interface IDelaunay {\n /** raw data basis for delaunay computations, can be nested */\n points: Array\n\n /** function to access the x value for a given data point */\n xAccessor: AccessorFunction\n\n /** function to access the y value for a given data point */\n yAccessor: AccessorFunction\n\n /** scale used to scale elements in x direction */\n xScale: Scale\n\n /** scale used to scale elements in y direction */\n yScale: Scale\n\n /** function called with the array of nearest points on mouse movement -- if aggregate is false, the array will contain at most one element */\n onPoint?: InteractionFunction\n\n /** function called when the delaunay area is left */\n onLeave?: EmptyInteractionFunction\n\n /** function called with the array of nearest points on mouse click in the delaunay area -- if aggregate is false, the array will contain at most one element */\n onClick?: InteractionFunction\n\n /** whether or not the points array contains sub-arrays */\n nested?: boolean\n\n /** if multiple points have the same x value and should be shown together, aggregate can be set to true */\n aggregate?: boolean\n\n /** optional function specifying whether or not to show a given datapoint */\n defined?: DefinedFunction\n}\n\nexport default class Delaunay {\n points?: Array\n aggregatedPoints: any\n delaunay: any\n xScale: Scale\n yScale: Scale\n xAccessor: AccessorFunction\n yAccessor: AccessorFunction\n aggregate = false\n onPoint: InteractionFunction\n onClick?: InteractionFunction\n onLeave: EmptyInteractionFunction\n\n constructor({\n points,\n xAccessor,\n yAccessor,\n xScale,\n yScale,\n onPoint,\n onLeave,\n onClick,\n nested,\n aggregate,\n defined\n }: IDelaunay) {\n this.xAccessor = xAccessor\n this.yAccessor = yAccessor\n this.xScale = xScale\n this.yScale = yScale\n this.onPoint = onPoint ?? (() => null)\n this.onLeave = onLeave ?? (() => null)\n this.onClick = onClick ?? this.onClick\n this.aggregate = aggregate ?? this.aggregate\n\n // normalize passed points\n const isNested = nested ?? (Array.isArray(points[0]) && points.length > 1)\n this.normalizePoints({ points, nested: isNested, aggregate, defined })\n\n // set up delaunay\n this.mountDelaunay(isNested, this.aggregate)\n }\n\n /**\n * Create a new delaunay triangulation.\n *\n * @param isNested whether or not the data is nested\n * @param aggregate whether or not to aggregate points based on their x value\n */\n mountDelaunay(isNested: boolean, aggregate: boolean): void {\n // if points are not set yet, stop\n if (!this.points) {\n console.error('error: points not defined')\n return\n }\n\n this.delaunay = DelaunayObject.from(\n this.points.map((point) => [\n this.xAccessor(point) as number,\n (isNested && !aggregate ? this.yAccessor(point) : 0) as number\n ])\n )\n }\n\n /**\n * Normalize the passed data points.\n *\n * @param {Object} args argument object\n * @param {Array} args.points raw data array\n * @param {Boolean} args.isNested whether or not the points are nested\n * @param {Boolean} args.aggregate whether or not to aggregate points based on their x value\n * @param {Function} [args.defined] optional function specifying whether or not to show a given datapoint.\n */\n normalizePoints({\n points,\n nested,\n aggregate,\n defined\n }: Pick): void {\n this.points = nested\n ? points\n .map((pointArray, arrayIndex) =>\n pointArray\n .filter((p: any) => !defined || defined(p))\n .map((point: any, index: number) => ({\n ...point,\n index,\n arrayIndex\n }))\n )\n .flat(Infinity)\n : points\n .flat(Infinity)\n .filter((p) => !defined || defined(p))\n .map((p, index) => ({ ...p, index }))\n\n // if points should be aggregated, hash-map them based on their x accessor value\n if (!aggregate) return\n this.aggregatedPoints = this.points.reduce((acc, val) => {\n const key = JSON.stringify(this.xAccessor(val))\n if (!acc.has(key)) {\n acc.set(key, [val])\n } else {\n acc.set(key, [val, ...acc.get(key)])\n }\n return acc\n }, new Map())\n }\n\n /**\n * Handle raw mouse movement inside the delaunay rect.\n * Finds the nearest data point(s) and calls onPoint.\n *\n * @param rawX raw x coordinate of the cursor.\n * @param rawY raw y coordinate of the cursor.\n */\n gotPoint(rawX: number, rawY: number): void {\n // if points are empty, return\n if (!this.points) {\n console.error('error: points are empty')\n return\n }\n\n const x = this.xScale.scaleObject.invert(rawX)\n const y = this.yScale.scaleObject.invert(rawY)\n\n // find nearest point\n const index = this.delaunay.find(x, y)\n\n // if points should be aggregated, get all points with the same x value\n if (this.aggregate) {\n this.onPoint(this.aggregatedPoints.get(JSON.stringify(this.xAccessor(this.points[index]))))\n } else {\n this.onPoint([this.points[index]])\n }\n }\n\n /**\n * Handle raw mouse clicks inside the delaunay rect.\n * Finds the nearest data point(s) and calls onClick.\n *\n * @param rawX raw x coordinate of the cursor.\n * @param rawY raw y coordinate of the cursor.\n */\n clickedPoint(rawX: number, rawY: number): void {\n // if points empty, abort\n if (!this.points) {\n console.error('error: points empty')\n return\n }\n\n const x = this.xScale.scaleObject.invert(rawX)\n const y = this.yScale.scaleObject.invert(rawY)\n\n // find nearest point\n const index = this.delaunay.find(x, y)\n if (this.onClick) this.onClick({ ...this.points[index], index })\n }\n\n /**\n * Mount the delaunator to a given d3 node.\n *\n * @param svg d3 selection to mount the delaunay elements to.\n */\n mountTo(svg: GenericD3Selection): void {\n svg.on('mousemove', (event) => {\n const coords = pointer(event)\n this.gotPoint(coords[0], coords[1])\n })\n svg.on('mouseleave', () => {\n this.onLeave()\n })\n svg.on('click', (event) => {\n const coords = pointer(event)\n this.clickedPoint(coords[0], coords[1])\n })\n }\n}\n"
},
{
"path": "lib/src/components/legend.ts",
"content": "import { select } from 'd3'\nimport constants from '../misc/constants'\nimport { LegendSymbol } from '../misc/typings'\n\ninterface ILegend {\n /** array of descriptive legend strings */\n legend: Array\n\n /** colors used for the legend -- will be darkened for better visibility */\n colorScheme: Array\n\n /** symbol used in the legend */\n symbolType: LegendSymbol\n}\n\nexport default class Legend {\n legend: Array\n colorScheme: Array\n symbolType: LegendSymbol\n\n constructor({ legend, colorScheme, symbolType }: ILegend) {\n this.legend = legend\n this.colorScheme = colorScheme\n this.symbolType = symbolType\n }\n\n /**\n * Darken a given color by a given amount.\n *\n * @see https://css-tricks.com/snippets/javascript/lighten-darken-color/\n * @param color hex color specifier\n * @param amount how much to darken the color\n * @returns darkened color in hex representation.\n */\n darkenColor(color: string, amount: number): string {\n // remove hash\n color = color.slice(1)\n\n const num = parseInt(color, 16)\n\n const r = this.clamp((num >> 16) + amount)\n const b = this.clamp(((num >> 8) & 0x00ff) + amount)\n const g = this.clamp((num & 0x0000ff) + amount)\n\n return '#' + (g | (b << 8) | (r << 16)).toString(16)\n }\n\n /**\n * Clamp a number between 0 and 255.\n *\n * @param number number to be clamped.\n * @returns clamped number.\n */\n clamp(number: number): number {\n return number > 255 ? 255 : number < 0 ? 0 : number\n }\n\n /**\n * Mount the legend to the given node.\n *\n * @param node d3 specifier or d3 node to mount the legend to.\n */\n mountTo(node: any) {\n const symbol = constants.symbol[this.symbolType]\n\n // create d3 selection if necessary\n const target = typeof node === 'string' ? select(node).append('div') : node.append('div')\n target.classed('mg-legend', true)\n\n this.legend.forEach((item, index) => {\n target\n .append('span')\n .classed('text-legend', true)\n .style('color', this.darkenColor(this.colorScheme[index], -10))\n .text(`${symbol} ${item}`)\n })\n }\n}\n"
},
{
"path": "lib/src/components/line.ts",
"content": "import { line, curveCatmullRom, CurveFactory } from 'd3'\nimport { AccessorFunction, SvgD3Selection } from '../misc/typings'\nimport Scale from './scale'\n\ninterface ILine {\n /** array of datapoints used to create the line */\n data: Array\n\n /** function to access the x value for a given datapoint */\n xAccessor: AccessorFunction\n\n /** function to access the y value for a given datapoint */\n yAccessor: AccessorFunction\n\n /** scale used to compute x values */\n xScale: Scale\n\n /** scale used to compute y values */\n yScale: Scale\n\n /** curving function used to draw the line. See {@link https://github.com/d3/d3-shape#curves} for curves available in d3 */\n curve?: CurveFactory\n\n /** color of the line */\n color?: string\n\n /** function specifying whether or not to show a given datapoint */\n defined?: (datapoint: any) => boolean\n}\n\nexport default class Line {\n lineObject?: any\n data: Array\n color: string\n\n constructor({ data, xAccessor, yAccessor, xScale, yScale, curve, color, defined }: ILine) {\n // cry if no data was passed\n if (!data) throw new Error('line needs data')\n this.data = data\n this.color = color ?? 'black'\n\n // set up line object\n this.lineObject = line()\n .defined((d) => {\n if (yAccessor(d) === null) return false\n if (typeof defined === 'undefined') return true\n return defined(d)\n })\n .x((d) => xScale.scaleObject(xAccessor(d)))\n .y((d) => yScale.scaleObject(yAccessor(d)))\n .curve(curve ?? curveCatmullRom)\n }\n\n /**\n * Mount the line to the given d3 node.\n *\n * @param svg d3 node to mount the line to.\n */\n mountTo(svg: SvgD3Selection): void {\n svg.append('path').classed('mg-line', true).attr('stroke', this.color).datum(this.data).attr('d', this.lineObject)\n }\n}\n"
},
{
"path": "lib/src/components/point.ts",
"content": "import { AccessorFunction, SvgD3Selection } from '../misc/typings'\nimport AbstractShape, { IAbstractShape } from './abstractShape'\n\nexport interface IPoint extends IAbstractShape {\n /** function to access the x value of the point */\n xAccessor: AccessorFunction\n\n /** function to access the y value of the point */\n yAccessor: AccessorFunction\n\n /** radius of the point */\n radius?: number\n}\n\nexport default class Point extends AbstractShape {\n xAccessor: AccessorFunction\n yAccessor: AccessorFunction\n radius = 1\n\n constructor({ xAccessor, yAccessor, radius, ...args }: IPoint) {\n super(args)\n this.xAccessor = xAccessor\n this.yAccessor = yAccessor\n this.radius = radius ?? this.radius\n }\n\n get cx(): number {\n return this.xScale.scaleObject(this.xAccessor(this.data))\n }\n\n get cy(): number {\n return this.yScale.scaleObject(this.yAccessor(this.data))\n }\n\n /**\n * Mount the point to the given node.\n *\n * @param svg d3 node to mount the point to.\n */\n mountTo(svg: SvgD3Selection): void {\n this.shapeObject = svg\n .append('circle')\n .attr('cx', this.cx)\n .attr('pointer-events', 'none')\n .attr('cy', this.cy)\n .attr('r', this.radius)\n .attr('fill', this.color)\n .attr('stroke', this.color)\n .attr('fill-opacity', this.fillOpacity)\n .attr('stroke-width', this.strokeWidth)\n }\n\n /**\n * Update the point.\n *\n * @param data point object\n */\n update({ data, ...args }: IAbstractShape): void {\n this.updateGeneric(args)\n if (data) {\n this.data = data\n if (!this.shapeObject) return\n this.shapeObject.attr('cx', this.cx).attr('cy', this.cy).attr('opacity', 1)\n }\n }\n}\n"
},
{
"path": "lib/src/components/rect.ts",
"content": "import { AccessorFunction, GenericD3Selection } from '../misc/typings'\nimport AbstractShape, { IAbstractShape } from './abstractShape'\n\ninterface IRect extends IAbstractShape {\n /** function to access the x value of the rectangle */\n xAccessor: AccessorFunction\n\n /** function to access the y value of the rectangle */\n yAccessor: AccessorFunction\n\n /** function to access the width of the rectangle */\n widthAccessor: AccessorFunction\n\n /** function to access the height of the rectangle */\n heightAccessor: AccessorFunction\n}\n\nexport default class Rect extends AbstractShape {\n xAccessor: AccessorFunction\n yAccessor: AccessorFunction\n widthAccessor: AccessorFunction\n heightAccessor: AccessorFunction\n\n constructor({ xAccessor, yAccessor, widthAccessor, heightAccessor, ...args }: IRect) {\n super(args)\n this.xAccessor = xAccessor\n this.yAccessor = yAccessor\n this.widthAccessor = widthAccessor\n this.heightAccessor = heightAccessor\n }\n\n get x(): number {\n return this.xScale.scaleObject(this.xAccessor(this.data))\n }\n\n get y(): number {\n return this.yScale.scaleObject(this.yAccessor(this.data))\n }\n\n get width(): number {\n return Math.max(0, Math.abs(this.widthAccessor(this.data)))\n }\n\n get height(): number {\n return Math.max(0, this.yScale.scaleObject(this.heightAccessor(this.data)))\n }\n\n /**\n * Mount the rectangle to the given node.\n *\n * @param svg d3 node to mount the rectangle to.\n */\n mountTo(svg: GenericD3Selection): void {\n this.shapeObject = svg\n .append('rect')\n .attr('x', this.x)\n .attr('y', this.y)\n .attr('width', this.width)\n .attr('height', this.height)\n .attr('pointer-events', 'none')\n .attr('fill', this.color)\n .attr('stroke', this.color)\n .attr('fill-opacity', this.fillOpacity)\n .attr('stroke-width', this.strokeWidth)\n }\n\n /**\n * Update the rectangle.\n *\n * @param data updated data object.\n */\n update({ data, ...args }: Partial): void {\n this.updateGeneric(args)\n if (data) {\n this.data = data\n if (!this.shapeObject) return\n this.shapeObject\n .attr('x', this.x)\n .attr('y', this.y)\n .attr('width', this.width)\n .attr('height', this.height)\n .attr('opacity', 1)\n }\n }\n}\n"
},
{
"path": "lib/src/components/rug.ts",
"content": "import constants from '../misc/constants'\nimport { AccessorFunction, GenericD3Selection } from '../misc/typings'\nimport Scale from './scale'\n\nexport enum RugOrientation {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical'\n}\n\ninterface IRug {\n /** accessor used to get the rug value for a given datapoint */\n accessor: AccessorFunction\n\n /** scale function of the rug */\n scale: Scale\n\n /** data to be rugged */\n data: Array\n\n /** length of the rug's ticks */\n tickLength?: number\n\n /** color scheme of the rug ticks */\n colors?: Array\n\n /** orientation of the rug */\n orientation?: RugOrientation\n\n /** left margin of the rug */\n left?: number\n\n /** top margin of the rug */\n top?: number\n}\n\nexport default class Rug {\n accessor: AccessorFunction\n scale: Scale\n rugObject: any\n data: Array\n left = 0\n top = 0\n tickLength = 5\n colors = constants.defaultColors\n orientation = RugOrientation.HORIZONTAL\n\n constructor({ accessor, scale, data, tickLength, colors, orientation, left, top }: IRug) {\n this.accessor = accessor\n this.scale = scale\n this.data = data\n this.tickLength = tickLength ?? this.tickLength\n this.colors = colors ?? this.colors\n this.orientation = orientation ?? this.orientation\n this.left = left ?? this.left\n this.top = top ?? this.top\n }\n\n get isVertical(): boolean {\n return this.orientation === constants.orientation.vertical\n }\n\n /**\n * Mount the rug to the given node.\n *\n * @param svg d3 node to mount the rug to.\n */\n mountTo(svg: GenericD3Selection): void {\n // add container\n const top = this.isVertical ? this.top : this.top - this.tickLength\n const container = svg.append('g').attr('transform', `translate(${this.left},${top})`)\n\n // add lines\n this.data.forEach((dataArray, i) =>\n dataArray.forEach((datum: any) => {\n const value = this.scale.scaleObject(this.accessor(datum))\n container\n .append('line')\n .attr(this.isVertical ? 'y1' : 'x1', value!)\n .attr(this.isVertical ? 'y2' : 'x2', value!)\n .attr(this.isVertical ? 'x1' : 'y1', 0)\n .attr(this.isVertical ? 'x2' : 'y2', this.tickLength)\n .attr('stroke', this.colors[i])\n })\n )\n }\n}\n"
},
{
"path": "lib/src/components/scale.ts",
"content": "import { scaleLinear, ScaleLinear } from 'd3'\nimport { Domain, Range } from '../misc/typings'\n\nenum ScaleType {\n LINEAR = 'linear'\n}\n\ntype SupportedScale = ScaleLinear\n\ninterface IScale {\n /** type of scale (currently only linear) */\n type?: ScaleType\n\n /** scale range */\n range?: Range\n\n /** scale domain */\n domain?: Domain\n\n /** overwrites domain lower bound */\n minValue?: number\n\n /** overwrites domain upper bound */\n maxValue?: number\n}\n\nexport default class Scale {\n type: ScaleType\n scaleObject: SupportedScale\n minValue?: number\n maxValue?: number\n\n constructor({ type, range, domain, minValue, maxValue }: IScale) {\n this.type = type ?? ScaleType.LINEAR\n this.scaleObject = this.getScaleObject(this.type)\n\n // set optional custom ranges and domains\n if (range) this.range = range\n if (domain) this.domain = domain\n\n // set optional min and max\n this.minValue = minValue\n this.maxValue = maxValue\n }\n\n /**\n * Get the d3 scale object for a given scale type.\n *\n * @param {String} type scale type\n * @returns {Object} d3 scale type\n */\n getScaleObject(type: ScaleType): SupportedScale {\n switch (type) {\n default:\n return scaleLinear()\n }\n }\n\n get range(): Range {\n return this.scaleObject.range()\n }\n\n set range(range: Range) {\n this.scaleObject.range(range)\n }\n\n get domain(): Domain {\n return this.scaleObject.domain()\n }\n\n set domain(domain: Domain) {\n // fix custom domain values if necessary\n if (typeof this.minValue !== 'undefined') domain[0] = this.minValue\n if (typeof this.maxValue !== 'undefined') domain[1] = this.maxValue\n this.scaleObject.domain(domain)\n }\n}\n"
},
{
"path": "lib/src/components/tooltip.ts",
"content": "import constants from '../misc/constants'\nimport { TextFunction, AccessorFunction, GenericD3Selection } from '../misc/typings'\n\nexport enum TooltipSymbol {\n CIRCLE = 'circle',\n LINE = 'line',\n SQUARE = 'square'\n}\n\ninterface ITooltip {\n /** symbol to show in the tooltip (defaults to line) */\n legendObject?: TooltipSymbol\n\n /** description of the different data arrays shown in the legend */\n legend?: Array\n\n /** array of colors for the different data arrays, defaults to schemeCategory10 */\n colors?: Array\n\n /** custom text formatting function -- generated from accessors if not defined */\n textFunction?: TextFunction\n\n /** entries to show in the tooltip, usually empty when first instantiating */\n data?: Array\n\n /** margin to the left of the tooltip */\n left?: number\n\n /** margin to the top of the tooltip */\n top?: number\n\n /** if no custom text function is specified, specifies how to get the x value from a specific data point */\n xAccessor?: AccessorFunction\n\n /** if no custom text function is specified, specifies how to get the y value from a specific data point */\n yAccessor?: AccessorFunction\n}\n\nexport default class Tooltip {\n legendObject = TooltipSymbol.LINE\n legend: Array\n colors = constants.defaultColors\n data: Array\n left = 0\n top = 0\n node: any\n textFunction = (x: any) => 'bla'\n\n constructor({ legendObject, legend, colors, textFunction, data, left, top, xAccessor, yAccessor }: ITooltip) {\n this.legendObject = legendObject ?? this.legendObject\n this.legend = legend ?? []\n this.colors = colors ?? this.colors\n this.setTextFunction(textFunction, xAccessor, yAccessor)\n this.data = data ?? []\n this.left = left ?? this.left\n this.top = top ?? this.top\n }\n\n /**\n * Sets the text function for the tooltip.\n *\n * @param textFunction custom text function for the tooltip text. Generated from xAccessor and yAccessor if not\n * @param xAccessor if no custom text function is specified, this function specifies how to get the x value from a specific data point.\n * @param yAccessor if no custom text function is specified, this function specifies how to get the y value from a specific data point.\n */\n setTextFunction(textFunction?: TextFunction, xAccessor?: AccessorFunction, yAccessor?: AccessorFunction): void {\n this.textFunction =\n textFunction || (xAccessor && yAccessor ? this.baseTextFunction(xAccessor, yAccessor) : this.textFunction)\n }\n\n /**\n * If no textFunction was specified when creating the tooltip instance, this method generates a text function based on the xAccessor and yAccessor.\n *\n * @param xAccessor returns the x value of a given data point.\n * @param yAccessor returns the y value of a given data point.\n * @returns base text function used to render the tooltip for a given datapoint.\n */\n baseTextFunction(xAccessor: AccessorFunction, yAccessor: AccessorFunction): TextFunction {\n return (point: any) => `${xAccessor(point)}: ${yAccessor(point)}`\n }\n\n /**\n * Update the tooltip.\n */\n update({ data, legendObject, legend }: Pick): void {\n this.data = data ?? this.data\n this.legendObject = legendObject ?? this.legendObject\n this.legend = legend ?? this.legend\n this.addText()\n }\n\n /**\n * Hide the tooltip (without destroying it).\n */\n hide(): void {\n this.node.attr('opacity', 0)\n }\n\n /**\n * Mount the tooltip to the given d3 node.\n *\n * @param svg d3 node to mount the tooltip to.\n */\n mountTo(svg: GenericD3Selection): void {\n this.node = svg\n .append('g')\n .style('font-size', '0.7rem')\n .attr('transform', `translate(${this.left},${this.top})`)\n .attr('opacity', 0)\n this.addText()\n }\n\n /**\n * Adds the text to the tooltip.\n * For each datapoint in the data array, one line is added to the tooltip.\n */\n addText(): void {\n // first, clear existing content\n this.node.selectAll('*').remove()\n\n // second, add one line per data entry\n this.node.attr('opacity', 1)\n this.data.forEach((datum, index) => {\n const symbol = constants.symbol[this.legendObject]\n const realIndex = datum.arrayIndex ?? index\n const color = this.colors[realIndex]\n const node = this.node\n .append('text')\n .attr('text-anchor', 'end')\n .attr('y', index * 12)\n\n // category\n node.append('tspan').classed('text-category', true).attr('fill', color).text(this.legend[realIndex])\n\n // symbol\n node.append('tspan').attr('dx', '6').attr('fill', color).text(symbol)\n\n // text\n node\n .append('tspan')\n .attr('dx', '6')\n .text(`${this.textFunction(datum)}`)\n })\n }\n}\n"
},
{
"path": "lib/src/index.ts",
"content": "export { default as LineChart } from './charts/line'\nexport { default as ScatterChart } from './charts/scatter'\nexport { default as HistogramChart } from './charts/histogram'\n"
},
{
"path": "lib/src/mg.css",
"content": ".mg-graph .domain {\n stroke: #b3b2b2;\n}\n\n.mg-graph .tick line {\n stroke: #b3b2b2;\n}\n\n.mg-graph .tick text {\n font-size: 0.7rem;\n fill: black;\n opacity: 0.6;\n}\n\n.mg-graph .label {\n font-size: 0.8rem;\n font-weight: 600;\n opacity: 0.8;\n}\n\n.mg-graph .line-marker {\n stroke: #ccc;\n stroke-width: 1px;\n stroke-dasharray: 2;\n}\n\n.mg-graph .line-baseline {\n stroke: #ccc;\n stroke-width: 1px;\n}\n\n.mg-graph .text-marker {\n text-anchor: middle;\n font-size: 0.7rem;\n fill: black;\n}\n\n.mg-graph .text-baseline {\n text-anchor: end;\n font-size: 0.7rem;\n fill: black;\n}\n\n.mg-graph .text-category {\n font-weight: bold;\n}\n\n.mg-line {\n stroke-width: 1;\n fill: none;\n}\n\n.mg-area {\n fill-opacity: 0.3;\n}\n\n.text-legend {\n margin-right: 1em;\n font-size: 0.7rem;\n}\n"
},
{
"path": "lib/src/misc/constants.ts",
"content": "const constants = {\n chartType: {\n line: 'line',\n histogram: 'histogram',\n bar: 'bar',\n point: 'point'\n },\n axisOrientation: {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right'\n },\n scaleType: {\n categorical: 'categorical',\n linear: 'linear',\n log: 'log'\n },\n axisFormat: {\n date: 'date',\n number: 'number',\n percentage: 'percentage'\n },\n legendObject: {\n circle: 'circle',\n line: 'line',\n square: 'square'\n },\n symbol: {\n line: '—',\n circle: '•',\n square: '■'\n },\n orientation: {\n vertical: 'vertical',\n horizontal: 'horizontal'\n },\n defaultColors: [\n '#1f77b4',\n '#ff7f0e',\n '#2ca02c',\n '#d62728',\n '#9467bd',\n '#8c564b',\n '#e377c2',\n '#7f7f7f',\n '#bcbd22',\n '#17becf'\n ]\n}\n\nexport default constants\n"
},
{
"path": "lib/src/misc/typings.ts",
"content": "import { Selection } from 'd3'\n\nexport interface AccessorFunction {\n (dataObject: X): Y\n}\n\nexport interface TextFunction {\n (dataObject: unknown): string\n}\n\nexport interface InteractionFunction {\n (pointArray: Array): void\n}\n\nexport interface EmptyInteractionFunction {\n (): void\n}\n\nexport interface DefinedFunction {\n (dataObject: unknown): boolean\n}\n\nexport interface Margin {\n left: number\n right: number\n bottom: number\n top: number\n}\n\nexport interface DomainObject {\n x: Domain\n y: Domain\n}\n\nexport enum LegendSymbol {\n LINE = 'line',\n CIRCLE = 'circle',\n SQUARE = 'square'\n}\n\nexport type BrushType = 'xy' | 'x' | 'y'\n\nexport type Domain = number[]\nexport type Range = number[]\n\nexport type GenericD3Selection = Selection\nexport type SvgD3Selection = Selection\nexport type GD3Selection = Selection\nexport type LineD3Selection = Selection\nexport type TextD3Selection = Selection\n"
},
{
"path": "lib/src/misc/utility.ts",
"content": "import { AccessorFunction } from './typings'\n\n/**\n * Handle cases where the user specifies an accessor string instead of an accessor function.\n *\n * @param functionOrString accessor string/function to be made an accessor function\n * @returns accessor function\n */\nexport function makeAccessorFunction(functionOrString: AccessorFunction | string): AccessorFunction {\n return typeof functionOrString === 'string' ? (d: any) => d[functionOrString] : functionOrString\n}\n\n/**\n * Generate a random id.\n * Used to create ids for clip paths, which need to be referenced by id.\n *\n * @returns random id string.\n */\nexport function randomId(): string {\n return Math.random().toString(36).substring(2, 15)\n}\n"
},
{
"path": "lib/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"node\",\n \"lib\": [\"ES2020\", \"DOM\"],\n \"strict\": true,\n \"sourceMap\": true,\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"outDir\": \"dist\"\n },\n \"include\": [\"src/**/*.ts\"]\n}\n"
},
{
"path": "package.json",
"content": "{\n \"private\": true,\n \"workspaces\": [\n \"lib\",\n \"app\"\n ],\n \"repository\": \"github:metricsgraphics/metrics-graphics\",\n \"contributors\": [\n \"Ali Almossawi\",\n \"Hamilton Ulmer\",\n \"William Lachance\",\n \"Jens Ochsenmeier\"\n ],\n \"license\": \"MPL-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/metricsgraphics/metrics-graphics/issues\"\n },\n \"homepage\": \"http://metricsgraphicsjs.org\",\n \"dependencies\": {},\n \"devDependencies\": {\n \"@typescript-eslint/eslint-plugin\": \"^5.25.0\",\n \"@typescript-eslint/parser\": \"^5.25.0\",\n \"eslint\": \"^8.15.0\",\n \"eslint-config-prettier\": \"^8.5.0\",\n \"eslint-config-standard\": \"^17.0.0\",\n \"eslint-plugin-import\": \"^2.26.0\",\n \"eslint-plugin-n\": \"^15.2.0\",\n \"eslint-plugin-prettier\": \"^4.0.0\",\n \"eslint-plugin-promise\": \"^6.0.0\",\n \"eslint-plugin-react\": \"^7.30.0\",\n \"eslint-plugin-react-hooks\": \"^4.5.0\",\n \"prettier\": \"^2.6.2\",\n \"typescript\": \"^4.6.4\"\n }\n}\n"
}
]