Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit70edc24

Browse files
chore: remove chartjs (#18016)
- Remove ChartJS in favor of Recharts- Migrate ActiveUserChart to use the new chart design<img width="1624" alt="Screenshot 2025-05-23 at 15 00 03"src="https://github.com/user-attachments/assets/5f451a88-f2ef-4139-a888-c0358eb8cf17"/>
1 parent196eccb commit70edc24

File tree

6 files changed

+119
-157
lines changed

6 files changed

+119
-157
lines changed

‎site/jest.config.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,7 @@ module.exports = {
4040
// can see many act warnings that may can help us to find the issue.
4141
"/usePaginatedQuery.test.ts",
4242
],
43-
transformIgnorePatterns:[
44-
"<rootDir>/node_modules/@chartjs-adapter-date-fns",
45-
],
43+
transformIgnorePatterns:[],
4644
moduleDirectories:["node_modules","<rootDir>/src"],
4745
moduleNameMapper:{
4846
"\\.css$":"<rootDir>/src/testHelpers/styleMock.ts",

‎site/package.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,6 @@
7878
"@xterm/xterm":"5.5.0",
7979
"ansi-to-html":"0.7.2",
8080
"axios":"1.8.2",
81-
"chart.js":"4.4.0",
82-
"chartjs-adapter-date-fns":"3.0.0",
8381
"chroma-js":"2.4.2",
8482
"class-variance-authority":"0.7.1",
8583
"clsx":"2.1.1",
@@ -99,7 +97,6 @@
9997
"monaco-editor":"0.52.0",
10098
"pretty-bytes":"6.1.1",
10199
"react":"18.3.1",
102-
"react-chartjs-2":"5.3.0",
103100
"react-color":"2.19.3",
104101
"react-confetti":"6.2.2",
105102
"react-date-range":"1.4.0",

‎site/pnpm-lock.yaml

Lines changed: 0 additions & 44 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,37 @@ const meta: Meta<typeof ActiveUserChart> = {
66
component:ActiveUserChart,
77
args:{
88
data:[
9-
{date:"1/1/2024",amount:5},
10-
{date:"1/2/2024",amount:6},
11-
{date:"1/3/2024",amount:7},
12-
{date:"1/4/2024",amount:8},
13-
{date:"1/5/2024",amount:9},
14-
{date:"1/6/2024",amount:10},
15-
{date:"1/7/2024",amount:11},
9+
{date:"2024-01-01",amount:5},
10+
{date:"2024-01-02",amount:6},
11+
{date:"2024-01-03",amount:7},
12+
{date:"2024-01-04",amount:8},
13+
{date:"2024-01-05",amount:9},
14+
{date:"2024-01-06",amount:10},
15+
{date:"2024-01-07",amount:11},
1616
],
17-
interval:"day",
1817
},
18+
decorators:[
19+
(Story)=>(
20+
<divstyle={{height:"400px"}}>
21+
<Story/>
22+
</div>
23+
),
24+
],
1925
};
2026

2127
exportdefaultmeta;
2228
typeStory=StoryObj<typeofActiveUserChart>;
2329

2430
exportconstExample:Story={};
31+
32+
exportconstManyDataPoints:Story={
33+
args:{
34+
data:Array.from({length:30}).map((_,i)=>{
35+
constdate=newDate(2024,0,i+1);
36+
return{
37+
date:date.toISOString().split("T")[0],
38+
amount:5+Math.floor(Math.random()*15),
39+
};
40+
}),
41+
},
42+
};

‎site/src/components/ActiveUserChart/ActiveUserChart.tsx

Lines changed: 92 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,109 @@
1-
import"chartjs-adapter-date-fns";
2-
import{useTheme}from"@emotion/react";
31
import{
4-
CategoryScale,
5-
ChartasChartJS,
6-
typeChartOptions,
7-
Filler,
8-
Legend,
9-
LineElement,
10-
LinearScale,
11-
PointElement,
12-
TimeScale,
13-
Title,
14-
Tooltip,
15-
defaults,
16-
}from"chart.js";
2+
typeChartConfig,
3+
ChartContainer,
4+
ChartTooltip,
5+
ChartTooltipContent,
6+
}from"components/Chart/Chart";
177
import{
188
HelpTooltip,
199
HelpTooltipContent,
2010
HelpTooltipText,
2111
HelpTooltipTitle,
2212
HelpTooltipTrigger,
2313
}from"components/HelpTooltip/HelpTooltip";
24-
importdayjsfrom"dayjs";
2514
importtype{FC}from"react";
26-
import{Line}from"react-chartjs-2";
27-
28-
ChartJS.register(
29-
CategoryScale,
30-
LinearScale,
31-
TimeScale,
32-
LineElement,
33-
PointElement,
34-
Filler,
35-
Title,
36-
Tooltip,
37-
Legend,
38-
);
15+
import{Area,AreaChart,CartesianGrid,XAxis,YAxis}from"recharts";
3916

17+
constchartConfig={
18+
amount:{
19+
label:"Active Users",
20+
color:"hsl(var(--highlight-purple))",
21+
},
22+
}satisfiesChartConfig;
4023
exportinterfaceActiveUserChartProps{
41-
data:readonly{date:string;amount:number}[];
42-
interval:"day"|"week";
24+
data:{date:string;amount:number}[];
4325
}
4426

45-
exportconstActiveUserChart:FC<ActiveUserChartProps>=({
46-
data,
47-
interval,
48-
})=>{
49-
consttheme=useTheme();
50-
51-
constlabels=data.map((val)=>dayjs(val.date).format("YYYY-MM-DD"));
52-
constchartData=data.map((val)=>val.amount);
53-
54-
defaults.font.family=theme.typography.fontFamilyasstring;
55-
defaults.color=theme.palette.text.secondary;
56-
57-
constoptions:ChartOptions<"line">={
58-
responsive:true,
59-
animation:false,
60-
plugins:{
61-
legend:{
62-
display:false,
63-
},
64-
tooltip:{
65-
displayColors:false,
66-
callbacks:{
67-
title:(context)=>{
68-
constdate=newDate(context[0].parsed.x);
69-
returndate.toLocaleDateString();
70-
},
71-
},
72-
},
73-
},
74-
scales:{
75-
y:{
76-
grid:{color:theme.palette.divider},
77-
suggestedMin:0,
78-
ticks:{
79-
precision:0,
80-
},
81-
},
82-
x:{
83-
grid:{color:theme.palette.divider},
84-
ticks:{
85-
stepSize:data.length>10 ?2 :undefined,
86-
},
87-
type:"time",
88-
time:{
89-
unit:interval,
90-
},
91-
},
92-
},
93-
maintainAspectRatio:false,
94-
};
95-
27+
exportconstActiveUserChart:FC<ActiveUserChartProps>=({ data})=>{
9628
return(
97-
<Line
98-
data-chromatic="ignore"
99-
data={{
100-
labels:labels,
101-
datasets:[
102-
{
103-
label:`${interval==="day" ?"Daily" :"Weekly"} Active Users`,
104-
data:chartData,
105-
pointBackgroundColor:theme.roles.active.outline,
106-
pointBorderColor:theme.roles.active.outline,
107-
borderColor:theme.roles.active.outline,
108-
},
109-
],
110-
}}
111-
options={options}
112-
/>
29+
<ChartContainerconfig={chartConfig}className="aspect-auto h-full">
30+
<AreaChart
31+
accessibilityLayer
32+
data={data}
33+
margin={{
34+
top:10,
35+
left:0,
36+
right:0,
37+
}}
38+
>
39+
<CartesianGridvertical={false}/>
40+
<XAxis
41+
dataKey="date"
42+
tickLine={false}
43+
tickMargin={12}
44+
minTickGap={24}
45+
tickFormatter={(value:string)=>
46+
newDate(value).toLocaleDateString(undefined,{
47+
month:"short",
48+
day:"numeric",
49+
})
50+
}
51+
/>
52+
<YAxis
53+
dataKey="amount"
54+
tickLine={false}
55+
axisLine={false}
56+
tickMargin={12}
57+
tickFormatter={(value:number)=>{
58+
returnvalue===0 ?"" :value.toLocaleString();
59+
}}
60+
/>
61+
<ChartTooltip
62+
cursor={false}
63+
content={
64+
<ChartTooltipContent
65+
className="font-medium text-content-secondary"
66+
labelClassName="text-content-primary"
67+
labelFormatter={(_,p)=>{
68+
constitem=p[0];
69+
return`${item.value} active users`;
70+
}}
71+
formatter={(v,n,item)=>{
72+
constdate=newDate(item.payload.date);
73+
returndate.toLocaleString(undefined,{
74+
month:"long",
75+
day:"2-digit",
76+
});
77+
}}
78+
/>
79+
}
80+
/>
81+
<defs>
82+
<linearGradientid="fillAmount"x1="0"y1="0"x2="0"y2="1">
83+
<stop
84+
offset="5%"
85+
stopColor="var(--color-amount)"
86+
stopOpacity={0.8}
87+
/>
88+
<stop
89+
offset="95%"
90+
stopColor="var(--color-amount)"
91+
stopOpacity={0.1}
92+
/>
93+
</linearGradient>
94+
</defs>
95+
96+
<Area
97+
isAnimationActive={false}
98+
dataKey="amount"
99+
type="linear"
100+
fill="url(#fillAmount)"
101+
fillOpacity={0.4}
102+
stroke="var(--color-amount)"
103+
stackId="a"
104+
/>
105+
</AreaChart>
106+
</ChartContainer>
113107
);
114108
};
115109

‎site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,6 @@ const ActiveUsersPanel: FC<ActiveUsersPanelProps> = ({
257257
{data&&data.length===0&&<NoDataAvailable/>}
258258
{data&&data.length>0&&(
259259
<ActiveUserChart
260-
interval={interval}
261260
data={data.map((d)=>({
262261
amount:d.active_users,
263262
date:d.start_time,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp