Untitled

        <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>
  )
}