Skip to content

Commit f4f5ed7

Browse files
K4ST0RK4ST0R
committed
feat: ajout des charts
1 parent 190d010 commit f4f5ed7

12 files changed

+714
-2
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
"@emotion/react": "^11.10.4",
7272
"@emotion/styled": "^11.10.4",
7373
"@gouvfr/dsfr": "1.12.1",
74+
"@gouvfr/dsfr-chart": "^1.0.0",
7475
"@mui/icons-material": "^5.14.18",
7576
"@mui/material": "^5.14.18",
7677
"@storybook/addon-a11y": "^6.5.16",

‎src/Chart/BarChart.tsx‎

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

‎src/Chart/BarLineChart.tsx‎

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

‎src/Chart/GaugeChart.tsx‎

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

‎src/Chart/LineChart.tsx‎

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

‎src/Chart/MultiLineChart.tsx‎

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

‎src/Chart/PieChart.tsx‎

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

‎src/Chart/RadarChart.tsx‎

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

‎src/Chart/ScatterChart.tsx‎

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

0 commit comments

Comments
 (0)