Skip to content

Commit d59111a

Browse files
dangreendangreen
authored
feat: new prop types, expose chart instance (#62)
1 parent df37391 commit d59111a

16 files changed

+621
-128
lines changed

‎.size-limit.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
{
1414
"path": "dist/index.js",
15-
"limit": "1.98 KB",
15+
"limit": "2.1 KB",
1616
"webpack": false,
1717
"running": false
1818
},

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@
3636
"test:size": "size-limit",
3737
"test:unit": "jest -c jest.config.json",
3838
"test": "pnpm test:lint && pnpm test:unit",
39-
"start:storybook": "start-storybook -p 6006",
39+
"start:storybook": "start-storybook -p 6006 --ci",
4040
"build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook",
4141
"bumpVersion": "standard-version",
4242
"createGithubRelease": "simple-github-release",
43-
"release": "pnpm bumpVersion && git push origin master --tags && pnpm createGithubRelease"
43+
"release": "pnpm bumpVersion && git push origin master --tags && pnpm createGithubRelease",
44+
"updateGitHooks": "simple-git-hooks"
4445
},
4546
"peerDependencies": {
4647
"chart.js": "^3.5.0",
@@ -63,7 +64,7 @@
6364
"@types/jest": "^28.1.5",
6465
"@typescript-eslint/eslint-plugin": "^5.30.6",
6566
"@typescript-eslint/parser": "^5.30.6",
66-
"chart.js": "^3.5.0",
67+
"chart.js": "^3.8.0",
6768
"clean-publish": "^4.0.1",
6869
"commitizen": "^4.2.4",
6970
"cz-conventional-changelog": "^3.3.0",
@@ -80,6 +81,7 @@
8081
"rollup": "^2.75.7",
8182
"rollup-plugin-svelte": "^7.1.0",
8283
"rollup-plugin-swc": "^0.2.1",
84+
"simple-git-hooks": "^2.8.0",
8385
"simple-github-release": "^1.0.0",
8486
"size-limit": "^7.0.8",
8587
"standard-version": "^9.5.0",

‎pnpm-lock.yaml

Lines changed: 13 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Bar.svelte

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script lang="ts">
2-
import { Chart, BarController } from 'chart.js';
3-
2+
import type { DefaultDataPoint } from 'chart.js';
3+
import { Chart as ChartJS, BarController } from 'chart.js';
4+
import type { ChartProps } from './types';
45
import Base from './Base.svelte';
5-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
66
7-
interface $$Props {
8-
data: TChartData<'bar', number[], unknown>;
9-
options?: TChartOptions<'bar'>;
10-
plugins?: TChartPlugin<'bar'>[];
7+
interface $$Props<TData = DefaultDataPoint<'bar'>, TLabel = unknown>
8+
extends Omit<ChartProps<'bar', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'bar', TData, TLabel> | null;
1110
}
1211
13-
Chart.register(BarController);
12+
ChartJS.register(BarController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1416
</script>
1517

16-
<Base {...$$props} type="bar" />
18+
<Base bind:chart type="bar" {...props} />

‎src/Base.svelte

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
<script lang="ts">
22
import { onMount, afterUpdate, onDestroy } from 'svelte';
3-
4-
import { Chart } from 'chart.js';
5-
6-
import type {
7-
TChartType,
8-
TChartData,
9-
TChartOptions,
10-
TChartPlugin,
11-
TypedChartJS,
12-
} from './types';
13-
14-
export let data: TChartData = {
15-
labels: [],
16-
datasets: [{ data: [] }],
17-
};
18-
export let type: TChartType = 'line';
19-
export let options: TChartOptions<TChartType> = {};
20-
export let plugins: TChartPlugin[] = [];
3+
import type { ChartType, DefaultDataPoint } from 'chart.js';
4+
import { Chart as ChartJS } from 'chart.js';
5+
import type { ChartProps } from './types';
6+
7+
interface $$Props<
8+
TType extends ChartType = ChartType,
9+
TData = DefaultDataPoint<TType>,
10+
TLabel = unknown
11+
> extends ChartProps<TType, TData, TLabel> {
12+
chart: ChartJS<TType, TData, TLabel> | null;
13+
}
2114
2215
function clean(props: SvelteAllProps) {
2316
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -27,19 +20,25 @@
2720
return rest;
2821
}
2922
23+
export let type: $$Props['type'];
24+
export let data: $$Props['data'] = {
25+
datasets: [],
26+
};
27+
export let options: $$Props['options'] = {};
28+
export let plugins: $$Props['plugins'] = [];
29+
export let chart: $$Props['chart'] = null;
30+
let canvasRef: HTMLCanvasElement;
3031
let props = clean($$props);
3132
32-
let chart: TypedChartJS | null = null;
33-
let chartRef: HTMLCanvasElement;
34-
3533
onMount(() => {
36-
chart = new Chart(chartRef, {
34+
chart = new ChartJS(canvasRef, {
3735
type,
3836
data,
3937
options,
4038
plugins,
4139
});
4240
});
41+
4342
afterUpdate(() => {
4443
if (!chart) return;
4544
@@ -54,4 +53,4 @@
5453
});
5554
</script>
5655

57-
<canvas bind:this={chartRef} {...props} />
56+
<canvas bind:this={canvasRef} {...props} />

‎src/Bubble.svelte

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<script lang="ts">
2-
import { Chart, BubbleController } from 'chart.js';
3-
import type { BubbleDataPoint } from 'chart.js';
4-
2+
import type { DefaultDataPoint } from 'chart.js';
3+
import { Chart as ChartJS, BubbleController } from 'chart.js';
4+
import type { ChartProps } from './types';
55
import Base from './Base.svelte';
6-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
76
8-
interface $$Props {
9-
data: TChartData<'bubble', BubbleDataPoint[], unknown>;
10-
options?: TChartOptions<'bubble'>;
11-
plugins?: TChartPlugin<'bubble'>[];
7+
interface $$Props<TData = DefaultDataPoint<'bubble'>, TLabel = unknown>
8+
extends Omit<ChartProps<'bubble', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'bubble', TData, TLabel> | null;
1210
}
1311
14-
Chart.register(BubbleController);
12+
ChartJS.register(BubbleController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1516
</script>
1617

17-
<Base {...$$props} type="bubble" />
18+
<Base bind:chart type="bubble" {...props} />

‎src/Doughnut.svelte

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script lang="ts">
2-
import { Chart, DoughnutController } from 'chart.js';
3-
2+
import type { DefaultDataPoint } from 'chart.js';
3+
import { Chart as ChartJS, DoughnutController } from 'chart.js';
4+
import type { ChartProps } from './types';
45
import Base from './Base.svelte';
5-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
66
7-
interface $$Props {
8-
data: TChartData<'doughnut', number[], unknown>;
9-
options?: TChartOptions<'doughnut'>;
10-
plugins?: TChartPlugin<'doughnut'>[];
7+
interface $$Props<TData = DefaultDataPoint<'doughnut'>, TLabel = unknown>
8+
extends Omit<ChartProps<'doughnut', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'doughnut', TData, TLabel> | null;
1110
}
1211
13-
Chart.register(DoughnutController);
12+
ChartJS.register(DoughnutController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1416
</script>
1517

16-
<Base {...$$props} type="doughnut" />
18+
<Base bind:chart type="doughnut" {...props} />

‎src/Line.svelte

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<script lang="ts">
2-
import { Chart, LineController } from 'chart.js';
32
import type { DefaultDataPoint } from 'chart.js';
4-
3+
import { Chart as ChartJS, LineController } from 'chart.js';
4+
import type { ChartProps } from './types';
55
import Base from './Base.svelte';
6-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
76
8-
interface $$Props {
9-
data: TChartData<'line', DefaultDataPoint<'line'>, unknown>;
10-
options?: TChartOptions<'line'>;
11-
plugins?: TChartPlugin<'line'>[];
7+
interface $$Props<TData = DefaultDataPoint<'line'>, TLabel = unknown>
8+
extends Omit<ChartProps<'line', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'line', TData, TLabel> | null;
1210
}
1311
14-
Chart.register(LineController);
12+
ChartJS.register(LineController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1516
</script>
1617

17-
<Base {...$$props} type="line" />
18+
<Base bind:chart type="line" {...props} />

‎src/Pie.svelte

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script lang="ts">
2-
import { Chart, PieController } from 'chart.js';
3-
2+
import type { DefaultDataPoint } from 'chart.js';
3+
import { Chart as ChartJS, PieController } from 'chart.js';
4+
import type { ChartProps } from './types';
45
import Base from './Base.svelte';
5-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
66
7-
interface $$Props {
8-
data: TChartData<'pie', number[], unknown>;
9-
options?: TChartOptions<'pie'>;
10-
plugins?: TChartPlugin<'pie'>[];
7+
interface $$Props<TData = DefaultDataPoint<'pie'>, TLabel = unknown>
8+
extends Omit<ChartProps<'pie', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'pie', TData, TLabel> | null;
1110
}
1211
13-
Chart.register(PieController);
12+
ChartJS.register(PieController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1416
</script>
1517

16-
<Base {...$$props} type="pie" />
18+
<Base bind:chart type="pie" {...props} />

‎src/Polar.svelte

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<script lang="ts">
2-
import { Chart, PolarAreaController } from 'chart.js';
3-
2+
import type { DefaultDataPoint } from 'chart.js';
3+
import { Chart as ChartJS, PolarAreaController } from 'chart.js';
4+
import type { ChartProps } from './types';
45
import Base from './Base.svelte';
5-
import type { TChartData, TChartOptions, TChartPlugin } from './types';
66
7-
interface $$Props {
8-
data: TChartData<'polarArea', number[], unknown>;
9-
options?: TChartOptions<'polarArea'>;
10-
plugins?: TChartPlugin<'polarArea'>[];
7+
interface $$Props<TData = DefaultDataPoint<'polarArea'>, TLabel = unknown>
8+
extends Omit<ChartProps<'polarArea', TData, TLabel>, 'type'> {
9+
chart: ChartJS<'polarArea', TData, TLabel> | null;
1110
}
1211
13-
Chart.register(PolarAreaController);
12+
ChartJS.register(PolarAreaController);
13+
14+
export let chart: $$Props['chart'] = null;
15+
let props = $$props as $$Props;
1416
</script>
1517

16-
<Base {...$$props} type="polarArea" />
18+
<Base bind:chart type="polarArea" {...props} />

0 commit comments

Comments
 (0)