Untitled

      <CardContent>
        <ChartContainer config={chartConfig} className="aspect-auto h-[400px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart 
              data={chartData}
              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
            >
              <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}%`}
              />

              <Tooltip
                wrapperStyle={{ outline: 'none' }}
                isAnimationActive={false}
                cursor={{ strokeDasharray: '3 3' }}
                content={({ active, payload, label }) => {
                  if (!active || !payload?.length) return null

                  const date = format(label, "MMM dd, yyyy HH:mm")

                  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>
                        {payload.map((entry) => (
                          <div key={entry.dataKey} className="flex items-center gap-2">
                            <div 
                              className="h-2 w-2 rounded-full" 
                              style={{ background: entry.stroke }} 
                            />
                            <span className="text-sm text-muted-foreground">
                              {entry.name || formatBinName(entry.dataKey)}:
                            </span>
                            <span className="text-sm font-medium">
                              {`${entry.value?.toFixed(0)}%`}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )
                }}
              />

              <ChartLegend content={<ChartLegendContent />} />

              {selectedBin === "all" ? (
                activeBins.map(bin => (
                  <Line
                    key={bin}
                    type="monotone"
                    dataKey={bin}
                    name={formatBinName(bin)}
                    stroke={binColors[bin as keyof typeof binColors]}
                    strokeWidth={2}
                    dot={false}
                    connectNulls
                    activeDot={{ r: 4, strokeWidth: 1 }}
                    isAnimationActive={false}
                  />
                ))
              ) : (
                <>
                  <Line
                    type="monotone"
                    dataKey="fillLevel"
                    name={formatBinName(selectedBin)}
                    stroke={binColors[selectedBin as keyof typeof binColors]}
                    strokeWidth={2}
                    dot={false}
                    connectNulls
                    activeDot={{ r: 4, strokeWidth: 1 }}
                    isAnimationActive={false}
                  />
                  <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)" />
                    )}
                  />
                </>
              )}
            </LineChart>
          </ResponsiveContainer>
        </ChartContainer>
      </CardContent>