mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
First iteration to migrate to Chart.js 3. Making it compile
This commit is contained in:
parent
aceb2350cf
commit
0572bc2854
6 changed files with 113 additions and 154 deletions
63
package-lock.json
generated
63
package-lock.json
generated
|
@ -6363,15 +6363,6 @@
|
||||||
"@babel/types": "^7.3.0"
|
"@babel/types": "^7.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/chart.js": {
|
|
||||||
"version": "2.9.31",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.31.tgz",
|
|
||||||
"integrity": "sha512-hzS6phN/kx3jClk3iYqEHNnYIRSi4RZrIGJ8CDLjgatpHoftCezvC44uqB3o3OUm9ftU1m7sHG8+RLyPTlACrA==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"moment": "^2.10.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@types/cheerio": {
|
"@types/cheerio": {
|
||||||
"version": "0.22.22",
|
"version": "0.22.22",
|
||||||
"resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.22.tgz",
|
"resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.22.tgz",
|
||||||
|
@ -10578,30 +10569,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"chart.js": {
|
"chart.js": {
|
||||||
"version": "2.9.4",
|
"version": "3.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.1.tgz",
|
||||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
"integrity": "sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ=="
|
||||||
"requires": {
|
|
||||||
"chartjs-color": "^2.1.0",
|
|
||||||
"moment": "^2.10.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chartjs-color": {
|
|
||||||
"version": "2.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
|
||||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
|
||||||
"requires": {
|
|
||||||
"chartjs-color-string": "^0.6.0",
|
|
||||||
"color-convert": "^1.9.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chartjs-color-string": {
|
|
||||||
"version": "0.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
|
||||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
|
||||||
"requires": {
|
|
||||||
"color-name": "^1.0.0"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"check-types": {
|
"check-types": {
|
||||||
"version": "11.1.2",
|
"version": "11.1.2",
|
||||||
|
@ -10957,6 +10927,7 @@
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
|
"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"color-name": "1.1.3"
|
"color-name": "1.1.3"
|
||||||
},
|
},
|
||||||
|
@ -10964,14 +10935,16 @@
|
||||||
"color-name": {
|
"color-name": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz",
|
"resolved": "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz",
|
||||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||||
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"color-name": {
|
"color-name": {
|
||||||
"version": "1.1.4",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz",
|
"resolved": "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz",
|
||||||
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
|
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"color-string": {
|
"color-string": {
|
||||||
"version": "1.5.4",
|
"version": "1.5.4",
|
||||||
|
@ -19000,11 +18973,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"moment": {
|
|
||||||
"version": "2.29.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
|
|
||||||
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
|
|
||||||
},
|
|
||||||
"moo": {
|
"moo": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
|
||||||
|
@ -24570,18 +24538,17 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-chartjs-2": {
|
"react-chartjs-2": {
|
||||||
"version": "2.11.1",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
|
||||||
"integrity": "sha512-G7cNq/n2Bkh/v4vcI+GKx7Q1xwZexKYhOSj2HmrFXlvNeaURWXun6KlOUpEQwi1cv9Tgs4H3kGywDWMrX2kxfA==",
|
"integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"lodash": "^4.17.19",
|
"lodash": "^4.17.19"
|
||||||
"prop-types": "^15.7.2"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lodash": {
|
"lodash": {
|
||||||
"version": "4.17.20",
|
"version": "4.17.21",
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
"bootstrap": "^4.6.0",
|
"bootstrap": "^4.6.0",
|
||||||
"bottlejs": "^2.0.0",
|
"bottlejs": "^2.0.0",
|
||||||
"bowser": "^2.11.0",
|
"bowser": "^2.11.0",
|
||||||
"chart.js": "^2.9.4",
|
"chart.js": "^3.5.1",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"compare-versions": "^3.6.0",
|
"compare-versions": "^3.6.0",
|
||||||
"csvjson": "^5.1.0",
|
"csvjson": "^5.1.0",
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
"qs": "^6.9.6",
|
"qs": "^6.9.6",
|
||||||
"ramda": "^0.27.1",
|
"ramda": "^0.27.1",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-chartjs-2": "^2.11.1",
|
"react-chartjs-2": "^3.0.4",
|
||||||
"react-color": "^2.19.3",
|
"react-color": "^2.19.3",
|
||||||
"react-copy-to-clipboard": "^5.0.2",
|
"react-copy-to-clipboard": "^5.0.2",
|
||||||
"react-datepicker": "^3.6.0",
|
"react-datepicker": "^3.6.0",
|
||||||
|
@ -72,7 +72,6 @@
|
||||||
"@stryker-mutator/jest-runner": "^5.0.0",
|
"@stryker-mutator/jest-runner": "^5.0.0",
|
||||||
"@stryker-mutator/typescript-checker": "^5.0.0",
|
"@stryker-mutator/typescript-checker": "^5.0.0",
|
||||||
"@svgr/webpack": "^5.5.0",
|
"@svgr/webpack": "^5.5.0",
|
||||||
"@types/chart.js": "^2.9.31",
|
|
||||||
"@types/classnames": "^2.2.11",
|
"@types/classnames": "^2.2.11",
|
||||||
"@types/enzyme": "^3.10.8",
|
"@types/enzyme": "^3.10.8",
|
||||||
"@types/jest": "^26.0.20",
|
"@types/jest": "^26.0.20",
|
||||||
|
|
|
@ -1,30 +1,12 @@
|
||||||
import { ChangeEvent, FC } from 'react';
|
import { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
|
||||||
import { ChartData, ChartTooltipItem } from 'chart.js';
|
|
||||||
import { prettify } from './numbers';
|
import { prettify } from './numbers';
|
||||||
|
|
||||||
export const pointerOnHover = ({ target }: ChangeEvent<HTMLElement>, chartElement: FC[]) => {
|
export const pointerOnHover = ({ native }: ChartEvent, [ firstElement ]: ActiveElement[]) => {
|
||||||
target.style.cursor = chartElement[0] ? 'pointer' : 'default';
|
if (!native?.target) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
(native.target as any).style.cursor = firstElement ? 'pointer' : 'default';
|
||||||
};
|
};
|
||||||
|
|
||||||
export const renderNonDoughnutChartLabel = (labelToPick: 'yLabel' | 'xLabel') => (
|
export const renderChartLabel = ({ dataset, label }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(label)}`;
|
||||||
item: ChartTooltipItem,
|
|
||||||
{ datasets }: ChartData,
|
|
||||||
) => {
|
|
||||||
const { datasetIndex } = item;
|
|
||||||
const value = item[labelToPick];
|
|
||||||
const datasetLabel = datasetIndex !== undefined && datasets?.[datasetIndex]?.label || '';
|
|
||||||
|
|
||||||
return `${datasetLabel}: ${prettify(Number(value))}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const renderDoughnutChartLabel = (
|
|
||||||
{ datasetIndex, index }: ChartTooltipItem,
|
|
||||||
{ labels, datasets }: ChartData,
|
|
||||||
) => {
|
|
||||||
const datasetLabel = index !== undefined && labels?.[index] || '';
|
|
||||||
const value = datasetIndex !== undefined && index !== undefined
|
|
||||||
&& datasets?.[datasetIndex]?.data?.[index]
|
|
||||||
|| '';
|
|
||||||
|
|
||||||
return `${datasetLabel}: ${prettify(Number(value))}`; // eslint-disable-line @typescript-eslint/no-base-to-string
|
|
||||||
};
|
|
||||||
|
|
|
@ -2,6 +2,6 @@ const TEN_ROUNDING_NUMBER = 10;
|
||||||
const { ceil } = Math;
|
const { ceil } = Math;
|
||||||
const formatter = new Intl.NumberFormat('en-US');
|
const formatter = new Intl.NumberFormat('en-US');
|
||||||
|
|
||||||
export const prettify = (number: number) => formatter.format(number);
|
export const prettify = (number: number | string) => formatter.format(Number(number));
|
||||||
|
|
||||||
export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
|
export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import { useState } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
import { Doughnut, Bar } from 'react-chartjs-2';
|
||||||
import { keys, values } from 'ramda';
|
import { keys, values } from 'ramda';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
|
import { Chart, ChartData, ChartDataset, ChartOptions, LegendItem } from 'chart.js';
|
||||||
import { fillTheGaps } from '../../utils/helpers/visits';
|
import { fillTheGaps } from '../../utils/helpers/visits';
|
||||||
import { Stats } from '../types';
|
import { Stats } from '../types';
|
||||||
import { prettify } from '../../utils/helpers/numbers';
|
import { prettify } from '../../utils/helpers/numbers';
|
||||||
import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
|
import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
|
||||||
import {
|
import {
|
||||||
HIGHLIGHTED_COLOR,
|
HIGHLIGHTED_COLOR,
|
||||||
HIGHLIGHTED_COLOR_ALPHA,
|
HIGHLIGHTED_COLOR_ALPHA,
|
||||||
|
@ -66,7 +66,7 @@ const generateGraphData = (
|
||||||
borderColor: HIGHLIGHTED_COLOR,
|
borderColor: HIGHLIGHTED_COLOR,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
},
|
},
|
||||||
].filter(Boolean) as ChartDataSets[],
|
].filter(Boolean) as ChartDataset[],
|
||||||
});
|
});
|
||||||
|
|
||||||
const dropLabelIfHidden = (label: string) => label.startsWith('hidden') ? '' : label;
|
const dropLabelIfHidden = (label: string) => label.startsWith('hidden') ? '' : label;
|
||||||
|
@ -79,27 +79,34 @@ const determineHeight = (isBarChart: boolean, labels: string[]): number | undefi
|
||||||
return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
|
return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderPieChartLegend = ({ config }: Chart) => {
|
const renderPieChartLegend = ({ config }: Chart): LegendItem[] => {
|
||||||
const { labels = [], datasets = [] } = config.data ?? {};
|
const { labels = [] /* , datasets = [] */ } = config.data ?? {};
|
||||||
const { defaultColor } = config.options ?? {} as any;
|
// const { defaultColor } = config.options ?? {} as any;
|
||||||
const [{ backgroundColor: colors }] = datasets;
|
// const [{ backgroundColor: colors }] = datasets;
|
||||||
|
|
||||||
return (
|
return labels.map((label, datasetIndex) => ({
|
||||||
<ul className="default-chart__pie-chart-legend">
|
datasetIndex,
|
||||||
{labels.map((label, index) => (
|
text: label as string,
|
||||||
<li key={label as string} className="default-chart__pie-chart-legend-item d-flex">
|
}));
|
||||||
<div
|
|
||||||
className="default-chart__pie-chart-legend-item-color"
|
// TODO
|
||||||
style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
|
// return (
|
||||||
/>
|
// <ul className="default-chart__pie-chart-legend">
|
||||||
<small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
|
// {labels.map((label, index) => (
|
||||||
</li>
|
// <li key={label as string} className="default-chart__pie-chart-legend-item d-flex">
|
||||||
))}
|
// <div
|
||||||
</ul>
|
// className="default-chart__pie-chart-legend-item-color"
|
||||||
);
|
// style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
|
||||||
|
// />
|
||||||
|
// <small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
|
||||||
|
// </li>
|
||||||
|
// ))}
|
||||||
|
// </ul>
|
||||||
|
// );
|
||||||
};
|
};
|
||||||
|
|
||||||
const chartElementAtEvent = (onClick?: (label: string) => void) => ([ chart ]: [{ _index: number; _chart: Chart }]) => {
|
const chartElementAtEvent = (onClick?: (label: string) => void) => ([ chart ]: [{ _index: number; _chart: Chart }]) => {
|
||||||
|
// TODO Check this function actually works with Chart.js 3
|
||||||
if (!onClick || !chart) {
|
if (!onClick || !chart) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -115,7 +122,8 @@ const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats &&
|
||||||
const DefaultChart = (
|
const DefaultChart = (
|
||||||
{ title, isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
|
{ title, isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
|
||||||
) => {
|
) => {
|
||||||
const Component = isBarChart ? HorizontalBar : Doughnut;
|
const Component = isBarChart ? Bar : Doughnut;
|
||||||
|
const chartRef = useRef<typeof Component | undefined>();
|
||||||
const labels = keys(stats).map(dropLabelIfHidden);
|
const labels = keys(stats).map(dropLabelIfHidden);
|
||||||
const data = values(
|
const data = values(
|
||||||
!statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
|
!statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
|
||||||
|
@ -127,34 +135,38 @@ const DefaultChart = (
|
||||||
}, { ...stats }),
|
}, { ...stats }),
|
||||||
);
|
);
|
||||||
const highlightedData = statsAreDefined(highlightedStats) ? fillTheGaps(highlightedStats, labels) : undefined;
|
const highlightedData = statsAreDefined(highlightedStats) ? fillTheGaps(highlightedStats, labels) : undefined;
|
||||||
const [ chartRef, setChartRef ] = useState<HorizontalBar | Doughnut | undefined>();
|
|
||||||
|
|
||||||
const options: ChartOptions = {
|
const options: ChartOptions = {
|
||||||
legend: { display: false },
|
plugins: {
|
||||||
legendCallback: !isBarChart && renderPieChartLegend as any,
|
legend: {
|
||||||
scales: !isBarChart ? undefined : {
|
display: false,
|
||||||
xAxes: [
|
labels: isBarChart ? undefined : {
|
||||||
{
|
generateLabels: renderPieChartLegend,
|
||||||
ticks: {
|
},
|
||||||
beginAtZero: true,
|
},
|
||||||
precision: 0,
|
tooltip: {
|
||||||
callback: prettify,
|
intersect: !isBarChart,
|
||||||
max,
|
// Do not show tooltip on items with empty label when in a bar chart
|
||||||
},
|
filter: ({ label }) => !isBarChart || label !== '',
|
||||||
stacked: true,
|
callbacks: {
|
||||||
|
label: renderChartLabel,
|
||||||
},
|
},
|
||||||
],
|
|
||||||
yAxes: [{ stacked: true }],
|
|
||||||
},
|
|
||||||
tooltips: {
|
|
||||||
intersect: !isBarChart,
|
|
||||||
// Do not show tooltip on items with empty label when in a bar chart
|
|
||||||
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
|
|
||||||
callbacks: {
|
|
||||||
label: isBarChart ? renderNonDoughnutChartLabel('xLabel') : renderDoughnutChartLabel,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onHover: !isBarChart ? undefined : (pointerOnHover) as any, // TODO Types seem to be incorrectly defined in @types/chart.js
|
scales: !isBarChart ? undefined : {
|
||||||
|
x: {
|
||||||
|
beginAtZero: true,
|
||||||
|
stacked: true,
|
||||||
|
max,
|
||||||
|
ticks: {
|
||||||
|
precision: 0,
|
||||||
|
callback: prettify,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: { stacked: true },
|
||||||
|
},
|
||||||
|
onHover: isBarChart ? pointerOnHover : undefined,
|
||||||
|
indexAxis: isBarChart ? 'y' : 'x',
|
||||||
};
|
};
|
||||||
const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
|
const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
|
||||||
const height = determineHeight(isBarChart, labels);
|
const height = determineHeight(isBarChart, labels);
|
||||||
|
@ -164,17 +176,20 @@ const DefaultChart = (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={classNames('col-sm-12', { 'col-md-7': !isBarChart })}>
|
<div className={classNames('col-sm-12', { 'col-md-7': !isBarChart })}>
|
||||||
<Component
|
<Component
|
||||||
ref={(element) => setChartRef(element ?? undefined)}
|
ref={(element) => {
|
||||||
|
chartRef.current = element ?? undefined;
|
||||||
|
}}
|
||||||
key={height}
|
key={height}
|
||||||
data={graphData}
|
data={graphData}
|
||||||
options={options}
|
options={options}
|
||||||
height={height}
|
height={height}
|
||||||
getElementAtEvent={chartElementAtEvent(onClick)}
|
getElementAtEvent={chartElementAtEvent(onClick) as any} /* TODO */
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{!isBarChart && (
|
{!isBarChart && (
|
||||||
<div className="col-sm-12 col-md-5">
|
<div className="col-sm-12 col-md-5">
|
||||||
{chartRef?.chartInstance.generateLegend()}
|
No Legend in v3.0 unfortunately :(
|
||||||
|
{/* {chartRef?.chartInstance.generateLegend()} */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,14 +21,14 @@ import {
|
||||||
startOfISOWeek,
|
startOfISOWeek,
|
||||||
endOfISOWeek,
|
endOfISOWeek,
|
||||||
} from 'date-fns';
|
} from 'date-fns';
|
||||||
import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
|
import { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
|
||||||
import { NormalizedVisit, Stats } from '../types';
|
import { NormalizedVisit, Stats } from '../types';
|
||||||
import { fillTheGaps } from '../../utils/helpers/visits';
|
import { fillTheGaps } from '../../utils/helpers/visits';
|
||||||
import { useToggle } from '../../utils/helpers/hooks';
|
import { useToggle } from '../../utils/helpers/hooks';
|
||||||
import { rangeOf } from '../../utils/utils';
|
import { rangeOf } from '../../utils/utils';
|
||||||
import ToggleSwitch from '../../utils/ToggleSwitch';
|
import ToggleSwitch from '../../utils/ToggleSwitch';
|
||||||
import { prettify } from '../../utils/helpers/numbers';
|
import { prettify } from '../../utils/helpers/numbers';
|
||||||
import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
|
import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
|
||||||
import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
|
import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
|
||||||
import './LineChartCard.scss';
|
import './LineChartCard.scss';
|
||||||
|
|
||||||
|
@ -134,11 +134,11 @@ const generateLabelsAndGroupedVisits = (
|
||||||
return [ labels, fillTheGaps(groupedVisitsWithGaps, labels) ];
|
return [ labels, fillTheGaps(groupedVisitsWithGaps, labels) ];
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateDataset = (data: number[], label: string, color: string): ChartDataSets => ({
|
const generateDataset = (data: number[], label: string, color: string): ChartDataset => ({
|
||||||
label,
|
label,
|
||||||
data,
|
data,
|
||||||
fill: false,
|
fill: false,
|
||||||
lineTension: 0.2,
|
tension: 0.2,
|
||||||
borderColor: color,
|
borderColor: color,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
});
|
});
|
||||||
|
@ -189,32 +189,28 @@ const LineChartCard = (
|
||||||
datasets: [
|
datasets: [
|
||||||
generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
|
generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
|
||||||
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
|
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
|
||||||
].filter(Boolean) as ChartDataSets[],
|
].filter(Boolean) as ChartDataset[],
|
||||||
};
|
};
|
||||||
const options: ChartOptions = {
|
const options: ChartOptions = {
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
legend: { display: false },
|
plugins: {
|
||||||
scales: {
|
legend: { display: false },
|
||||||
yAxes: [
|
tooltip: {
|
||||||
{
|
intersect: false,
|
||||||
ticks: {
|
axis: 'x',
|
||||||
beginAtZero: true,
|
callbacks: { label: renderChartLabel },
|
||||||
precision: 0,
|
},
|
||||||
callback: prettify,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
xAxes: [
|
|
||||||
{
|
|
||||||
scaleLabel: { display: true, labelString: STEPS_MAP[step] },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
tooltips: {
|
scales: {
|
||||||
intersect: false,
|
y: {
|
||||||
axis: 'x',
|
beginAtZero: true,
|
||||||
callbacks: {
|
ticks: {
|
||||||
label: renderNonDoughnutChartLabel('yLabel'),
|
precision: 0,
|
||||||
|
callback: prettify,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
title: { display: true, text: STEPS_MAP[step] },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onHover: (pointerOnHover) as any, // TODO Types seem to be incorrectly defined in @types/chart.js
|
onHover: (pointerOnHover) as any, // TODO Types seem to be incorrectly defined in @types/chart.js
|
||||||
|
@ -248,7 +244,7 @@ const LineChartCard = (
|
||||||
<Line
|
<Line
|
||||||
data={data}
|
data={data}
|
||||||
options={options}
|
options={options}
|
||||||
getElementAtEvent={chartElementAtEvent(datasetsByPoint, setSelectedVisits)}
|
getElementAtEvent={chartElementAtEvent(datasetsByPoint, setSelectedVisits) as any} // TODO
|
||||||
/>
|
/>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
Loading…
Reference in a new issue