Skip to content

Commit 0db478a

Browse files
garronejgarronej
authored
Merge pull request #300 from K4ST0R/feat-chart
feat: ajout des charts
2 parents 0ab5f2a + 963cdf6 commit 0db478a

28 files changed

+1608
-162
lines changed

‎.storybook/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ module.exports = {
22
"stories": [
33
"../stories/*.stories.mdx",
44
"../stories/*.stories.@(ts|tsx)",
5-
"../stories/blocks/*.stories.@(ts|tsx)"
5+
"../stories/blocks/*.stories.@(ts|tsx)",
6+
"../stories/charts/*.stories.@(ts|tsx)"
67
],
78
"addons": [
89
"@storybook/addon-links",

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
],
6464
"homepage": "https://github.com/codegouvfr/react-dsfr",
6565
"dependencies": {
66+
"@gouvfr/dsfr-chart": "^1.0.0",
6667
"tsafe": "^1.7.2",
6768
"yargs-parser": "^21.1.1"
6869
},

‎src/Chart/BarChart.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/BarChart/bar-chart.common";
5+
import "@gouvfr/dsfr-chart/BarChart/bar-chart.css";
6+
import {
7+
chartWrapper,
8+
IntrinsicGraphType,
9+
BaseChartProps,
10+
stringifyObjectValue,
11+
MultiChartProps,
12+
ChartLineProps,
13+
IntrinsicGraphLineType
14+
} from "./chartWrapper";
15+
16+
declare global {
17+
namespace JSX {
18+
interface IntrinsicElements {
19+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/BarChart.vue#L79
20+
"bar-chart": {
21+
horizontal?: string;
22+
stacked?: string;
23+
} & IntrinsicGraphType &
24+
IntrinsicGraphLineType;
25+
}
26+
}
27+
}
28+
29+
export type BarChartBaseProps = {
30+
horizontal?: boolean;
31+
stacked?: boolean;
32+
} & MultiChartProps &
33+
ChartLineProps;
34+
35+
export type BarChartProps = BarChartBaseProps & BaseChartProps;
36+
37+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barchart> */
38+
export const BarChart = chartWrapper((props: BarChartBaseProps) => {
39+
return <bar-chart {...stringifyObjectValue(props)} />;
40+
}, "bar-chart");
41+
BarChart.displayName = symToStr({ BarChart });
42+
43+
export default BarChart;

‎src/Chart/BarLineChart.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.common";
5+
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.css";
6+
import {
7+
chartWrapper,
8+
IntrinsicGraphType,
9+
BaseChartProps,
10+
stringifyObjectValue,
11+
ChartProps,
12+
ChartLineProps,
13+
IntrinsicGraphLineType
14+
} from "./chartWrapper";
15+
16+
declare global {
17+
namespace JSX {
18+
interface IntrinsicElements {
19+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/BarLineChart.vue#L75
20+
"bar-line-chart": {
21+
ybar: string;
22+
} & IntrinsicGraphType &
23+
IntrinsicGraphLineType;
24+
}
25+
}
26+
}
27+
28+
export type BarLineChartBaseProps = {
29+
ybar: number[];
30+
name?: [string, string];
31+
horizontal?: boolean;
32+
stacked?: boolean;
33+
} & Omit<ChartProps, "name"> &
34+
ChartLineProps;
35+
36+
export type BarLineChartProps = BarLineChartBaseProps & BaseChartProps;
37+
38+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barlinechart> */
39+
export const BarLineChart = chartWrapper((props: BarLineChartBaseProps) => {
40+
return <bar-line-chart {...stringifyObjectValue(props)} />;
41+
}, "bar-line-chart");
42+
BarLineChart.displayName = symToStr({ BarLineChart });
43+
44+
export default BarLineChart;

‎src/Chart/GaugeChart.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.common";
5+
import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.css";
6+
import { chartWrapper, BaseChartProps, stringifyObjectValue, ChartColor } from "./chartWrapper";
7+
8+
declare global {
9+
namespace JSX {
10+
interface IntrinsicElements {
11+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/GaugeChart.vue#L55
12+
"gauge-chart": {
13+
value: string;
14+
init: string;
15+
target: string;
16+
color: string;
17+
};
18+
}
19+
}
20+
}
21+
22+
export type GaugeChartBaseProps = {
23+
value: number;
24+
init: number;
25+
target: number;
26+
color?: ChartColor;
27+
};
28+
29+
export type GaugeChartProps = GaugeChartBaseProps & BaseChartProps;
30+
31+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-gaugechart> */
32+
export const GaugeChart = chartWrapper(
33+
(props: GaugeChartBaseProps) => <gauge-chart {...stringifyObjectValue(props)} />,
34+
"gauge-chart"
35+
);
36+
GaugeChart.displayName = symToStr({ GaugeChart });
37+
38+
export default GaugeChart;

‎src/Chart/LineChart.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/LineChart/line-chart.common";
5+
import "@gouvfr/dsfr-chart/LineChart/line-chart.css";
6+
import {
7+
chartWrapper,
8+
ChartProps,
9+
IntrinsicGraphType,
10+
BaseChartProps,
11+
stringifyObjectValue,
12+
ChartLineProps,
13+
IntrinsicGraphLineType
14+
} from "./chartWrapper";
15+
16+
declare global {
17+
namespace JSX {
18+
interface IntrinsicElements {
19+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/LineChart.vue#L70
20+
"line-chart": IntrinsicGraphType & IntrinsicGraphLineType;
21+
}
22+
}
23+
}
24+
25+
export type LineChartBaseProps = ChartProps & ChartLineProps;
26+
27+
export type LineChartProps = LineChartBaseProps & BaseChartProps;
28+
29+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-linechart> */
30+
export const LineChart = chartWrapper(
31+
(props: LineChartBaseProps) => <line-chart {...stringifyObjectValue(props)} />,
32+
"line-chart"
33+
);
34+
LineChart.displayName = symToStr({ LineChart });
35+
36+
export default LineChart;

‎src/Chart/MultiLineChart.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.common";
5+
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.css";
6+
import {
7+
chartWrapper,
8+
IntrinsicGraphType,
9+
BaseChartProps,
10+
stringifyObjectValue,
11+
MultiChartProps,
12+
ChartLineProps,
13+
IntrinsicGraphLineType
14+
} from "./chartWrapper";
15+
16+
declare global {
17+
namespace JSX {
18+
interface IntrinsicElements {
19+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/MultiLineChart.vue#L74
20+
"multiline-chart": IntrinsicGraphType & IntrinsicGraphLineType;
21+
}
22+
}
23+
}
24+
25+
export type MultiLineChartBaseProps = MultiChartProps & ChartLineProps;
26+
27+
export type MultiLineChartProps = MultiLineChartBaseProps & BaseChartProps;
28+
29+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-multilinechart> */
30+
export const MultiLineChart = chartWrapper(
31+
(props: MultiLineChartBaseProps) => <multiline-chart {...stringifyObjectValue(props)} />,
32+
"multiline-chart"
33+
);
34+
MultiLineChart.displayName = symToStr({ MultiLineChart });
35+
36+
export default MultiLineChart;

‎src/Chart/PieChart.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/PieChart/pie-chart.common";
5+
import "@gouvfr/dsfr-chart/PieChart/pie-chart.css";
6+
import {
7+
chartWrapper,
8+
ChartProps,
9+
IntrinsicGraphType,
10+
BaseChartProps,
11+
stringifyObjectValue
12+
} from "./chartWrapper";
13+
14+
declare global {
15+
namespace JSX {
16+
interface IntrinsicElements {
17+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/PieChart.vue#L59
18+
"pie-chart": {
19+
fill?: string;
20+
} & IntrinsicGraphType;
21+
}
22+
}
23+
}
24+
25+
export type PieChartBaseProps = {
26+
fill?: boolean;
27+
} & ChartProps;
28+
29+
export type PieChartProps = PieChartBaseProps & BaseChartProps;
30+
31+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-piechart> */
32+
export const PieChart = chartWrapper(
33+
(props: PieChartBaseProps) => <pie-chart {...stringifyObjectValue(props)} />,
34+
"pie-chart"
35+
);
36+
PieChart.displayName = symToStr({ PieChart });
37+
38+
export default PieChart;

‎src/Chart/RadarChart.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/RadarChart/radar-chart.common";
5+
import "@gouvfr/dsfr-chart/RadarChart/radar-chart.css";
6+
import {
7+
chartWrapper,
8+
IntrinsicGraphType,
9+
BaseChartProps,
10+
stringifyObjectValue,
11+
MultiChartProps
12+
} from "./chartWrapper";
13+
14+
declare global {
15+
namespace JSX {
16+
interface IntrinsicElements {
17+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/RadarChart.vue#L57
18+
"radar-chart": IntrinsicGraphType;
19+
}
20+
}
21+
}
22+
23+
export type RadarChartBaseProps = MultiChartProps;
24+
25+
export type RadarChartProps = RadarChartBaseProps & BaseChartProps;
26+
27+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
28+
export const RadarChart = chartWrapper(
29+
(props: RadarChartBaseProps) => <radar-chart {...stringifyObjectValue(props)} />,
30+
"radar-chart"
31+
);
32+
RadarChart.displayName = symToStr({ RadarChart });
33+
34+
export default RadarChart;

‎src/Chart/ScatterChart.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use client";
2+
import React from "react";
3+
import { symToStr } from "tsafe/symToStr";
4+
import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.common";
5+
import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.css";
6+
import {
7+
chartWrapper,
8+
BaseChartProps,
9+
MultiChartProps,
10+
IntrinsicGraphType,
11+
stringifyObjectValue,
12+
ChartLineProps,
13+
IntrinsicGraphLineType
14+
} from "./chartWrapper";
15+
16+
declare global {
17+
namespace JSX {
18+
interface IntrinsicElements {
19+
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/ScatterChart.vue#L75
20+
"scatter-chart": {
21+
showLine?: string;
22+
} & IntrinsicGraphType &
23+
IntrinsicGraphLineType;
24+
}
25+
}
26+
}
27+
28+
type ScatterChartBaseProps = {
29+
x: number[][];
30+
showLine?: boolean;
31+
} & Omit<MultiChartProps, "x"> &
32+
ChartLineProps;
33+
34+
export type ScatterChartProps = ScatterChartBaseProps & BaseChartProps;
35+
36+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
37+
export const ScatterChart = chartWrapper(
38+
(props: ScatterChartBaseProps) => <scatter-chart {...stringifyObjectValue(props)} />,
39+
"scatter-chart"
40+
);
41+
ScatterChart.displayName = symToStr({ ScatterChart });
42+
43+
export default ScatterChart;

0 commit comments

Comments
 (0)