Untitled
unknown
plain_text
3 months ago
6.4 kB
4
Indexable
<ChartContainer config={chartConfig} className="aspect-auto h-[400px] w-full"> <ResponsiveContainer width="100%" height="100%"> {selectedBin === "all" ? ( <LineChart data={chartData}> <CartesianGrid vertical={false} /> <XAxis dataKey="date" tickFormatter={(date) => format(date, "MMM dd")} minTickGap={40} axisLine={false} tickLine={false} tickMargin={8} /> <YAxis domain={[0, 100]} axisLine={false} tickLine={false} tickFormatter={(value) => `${value}%`} /> <ChartTooltip content={({ active, payload }) => { if (!active || !payload?.length) return null const date = format(payload[0].payload.date, "MMM dd, yyyy HH:mm") const entries = activeBins.map(bin => ({ dataKey: bin, value: payload[0].payload[bin], color: binColors[bin as keyof typeof binColors] })).filter(e => e.value !== null) return ( <div className="rounded-lg border bg-background p-2 shadow-sm"> <div className="grid gap-2"> <div className="text-sm font-medium">{date}</div> {entries.map((entry) => ( <div key={entry.dataKey} className="flex items-center gap-2"> <div className="h-2 w-2 rounded-full" style={{ background: entry.color }} /> <span className="text-sm text-muted-foreground"> {chartConfig[entry.dataKey].label}: </span> <span className="text-sm font-medium"> {entry.value?.toFixed(0)}% </span> </div> ))} </div> </div> ) }} /> <ChartLegend content={<ChartLegendContent />} /> {activeBins.map(bin => ( <Line key={bin} type="monotone" dataKey={bin} stroke={binColors[bin as keyof typeof binColors]} strokeWidth={2} dot={false} connectNulls /> ))} </LineChart> ) : ( <AreaChart data={chartData}> <CartesianGrid vertical={false} /> <XAxis dataKey="date" tickFormatter={(date) => format(date, "MMM dd")} minTickGap={40} axisLine={false} tickLine={false} tickMargin={8} /> <YAxis domain={[0, 100]} axisLine={false} tickLine={false} tickFormatter={(value) => `${value}%`} /> <ChartTooltip content={({ active, payload }) => { if (!active || !payload?.length) return null const date = format(payload[0].payload.date, "MMM dd, yyyy HH:mm") const entries = payload.filter(p => p.dataKey === "fillLevel") return ( <div className="rounded-lg border bg-background p-2 shadow-sm"> <div className="grid gap-2"> <div className="text-sm font-medium">{date}</div> {entries.map((entry) => ( <div key={entry.dataKey} className="flex items-center gap-2"> <div className="h-2 w-2 rounded-full" style={{ background: binColors[selectedBin as keyof typeof binColors] }} /> <span className="text-sm text-muted-foreground"> {chartConfig.fillLevel.label}: </span> <span className="text-sm font-medium"> {entry.value?.toFixed(0)}% </span> </div> ))} </div> </div> ) }} /> <ChartLegend content={<ChartLegendContent />} /> <defs> <linearGradient id="fillGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor={binColors[selectedBin as keyof typeof binColors]} stopOpacity={0.8} /> <stop offset="95%" stopColor={binColors[selectedBin as keyof typeof binColors]} stopOpacity={0.1} /> </linearGradient> </defs> <Area type="monotone" dataKey="fillLevel" stroke={binColors[selectedBin as keyof typeof binColors]} fill="url(#fillGradient)" fillOpacity={0.4} strokeWidth={2} dot={false} connectNulls /> <Scatter data={chartData.filter((d: any) => d.emptied)} dataKey="fillLevel" fill="var(--chart-5)" shape={(props) => ( <circle {...props} r={6} strokeWidth={2} stroke="var(--background)" /> )} /> </AreaChart> )} </ResponsiveContainer> </ChartContainer> </CardContent> </Card> ) }
Editor is loading...
Leave a Comment