@dhiraj0720/report1chart 2.5.7 → 2.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhiraj0720/report1chart",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "main": "src/index.jsx",
   "scripts": {
     "test": "echo 'No tests'"

package/src/components/FrozenTableReport2A.jsx

@@ -1,60 +1,160 @@
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
-import { formatNumber } from '../utils/formatNumber';
 
-const Arrow = ({ v }) => (
-  <Text style={{ color: v >= 0 ? 'green' : 'red', fontWeight: '700' }}>
-    {v >= 0 ? '↑' : '↓'} {Math.abs(v)}%
-  </Text>
-);
+// Helper: Format numbers with commas (e.g., 1083203 → 1,083,203)
+const formatNumber = (value) => {
+  if (value === null || value === undefined || value === '') return '-';
+  return Number(value).toLocaleString('en-US');
+};
+
+// Percentage cell with up/down arrow and color
+const PercentCell = ({ value }) => {
+  if (value === null || value === undefined) return <Text>-</Text>;
+  const positive = value >= 0;
+  return (
+    <Text style={[
+      styles.percentText,
+      { color: positive ? '#2e7d32' : '#d32f2f' }
+    ]}>
+      {positive ? '↑' : '↓'} {Math.abs(value)}%
+    </Text>
+  );
+};
 
-const Cell = ({ children, bold }) => (
-  <View style={styles.cell}>
-    <Text numberOfLines={1} style={bold && styles.bold}>{children}</Text>
+// Reusable cell component
+const Cell = ({ children, bold = false, highlight = false }) => (
+  <View style={[
+    styles.cell,
+    bold && styles.bold,
+    highlight && styles.highlightCell
+  ]}>
+    <Text style={[styles.cellText, bold && styles.boldText]}>
+      {children}
+    </Text>
   </View>
 );
 
-const FrozenTableReport2A = ({ rows }) => (
-  <View style={styles.container}>
-    <View style={styles.frozen}>
-      <Cell bold>AY</Cell>
-      {rows.map((r, i) => <Cell key={i} bold>{r.monthLabel}</Cell>)}
-    </View>
+const FrozenTableReport2A = ({ rows = [] }) => {
+  if (!rows || rows.length === 0) {
+    return <Text>No data available</Text>;
+  }
 
-    <ScrollView horizontal>
-      <View>
-        <View style={styles.header}>
-          <Cell bold>2024</Cell>
-          <Cell bold>2025</Cell>
-          <Cell bold>%</Cell>
-        </View>
+  return (
+    <View style={styles.container}>
+      {/* Frozen Left Column - AY (Month) */}
+      <View style={styles.frozenColumn}>
+        <Cell bold>AY</Cell>
+        {rows.map((row, index) => {
+          const isTotal = row.monthLabel === 'Total';
+          return (
+            <Cell
+              key={index}
+              bold={isTotal}
+              highlight={isTotal}
+            >
+              {row.monthLabel}
+            </Cell>
+          );
+        })}
+      </View>
 
-        {rows.map((r, i) => (
-          <View key={i} style={styles.row}>
-            <Cell>{formatNumber(r.teu2024)}</Cell>
-            <Cell>{formatNumber(r.teu2025)}</Cell>
-            <Cell><Arrow v={r.teuChangePercent} /></Cell>
+      {/* Scrollable Columns */}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View>
+          {/* Header Row */}
+          <View style={styles.headerRow}>
+            {[
+              '2024 TEU', '2025 TEU', 'TEU %',
+              '2024 Kar', '2025 Kar', 'Kar %',
+              '2025 Bütçe', 'Bütçe %'
+            ].map((header) => (
+              <Cell key={header} bold>
+                {header}
+              </Cell>
+            ))}
           </View>
-        ))}
-      </View>
-    </ScrollView>
-  </View>
-);
+
+          {/* Data Rows */}
+          {rows.map((row, index) => {
+            const isTotal = row.monthLabel === 'Total';
+
+            return (
+              <View key={index} style={styles.dataRow}>
+                <Cell highlight={isTotal}>{formatNumber(row.teu2024)}</Cell>
+                <Cell highlight={isTotal}>{formatNumber(row.teu2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.teuChangePercent} />
+                </Cell>
+
+                <Cell highlight={isTotal}>{formatNumber(row.profitUsd2024)}</Cell>
+                <Cell highlight={isTotal}>{formatNumber(row.profitUsd2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.profitChangePercent} />
+                </Cell>
+
+                <Cell highlight={isTotal}>{formatNumber(row.budgetProfitUsd2025)}</Cell>
+                <Cell highlight={isTotal}>
+                  <PercentCell value={row.budgetChangePercent} />
+                </Cell>
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
 
 export default FrozenTableReport2A;
 
 const styles = StyleSheet.create({
-  container: { flexDirection: 'row', marginVertical: 8 },
-  frozen: { width: 90, backgroundColor: '#f4f4f4' },
-  header: { flexDirection: 'row', backgroundColor: '#f4f4f4' },
-  row: { flexDirection: 'row' },
-  cell: {
-    width: 90,
-    padding: 6,
-    borderBottomWidth: 1,
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginVertical: 12,
+    backgroundColor: '#fff',
+  },
+  frozenColumn: {
+    width: 120,
+    backgroundColor: '#f4f6f8',
+    borderRightWidth: 1,
     borderColor: '#ddd',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    backgroundColor: '#f4f6f8',
+  },
+  dataRow: {
+    flexDirection: 'row',
+  },
+  cell: {
+    width: 130,
+    paddingVertical: 10,
+    paddingHorizontal: 6,
     justifyContent: 'center',
-    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  cellText: {
+    fontSize: 12,
+    textAlign: 'center',
+    color: '#333',
+  },
+  bold: {
+    backgroundColor: '#e9f0f8',
+  },
+  boldText: {
+    fontWeight: '700',
+  },
+  highlightCell: {
+    backgroundColor: '#e9f0f8',
+  },
+  percentText: {
+    fontWeight: '700',
+    fontSize: 12,
+    textAlign: 'center',
   },
-  bold: { fontWeight: '700' },
-});
+});

package/src/components/SvgBarLineChartCompact.jsx

@@ -6,107 +6,125 @@ import { formatNumber } from '../utils/formatNumber';
 const SvgBarLineChartCompact = ({ data }) => {
   if (!data?.series || !data.labels?.length) return null;
 
-  const height = 220;
-  const graphWidth = Math.max(320, data.labels.length * 80);
-
-  const paddingLeft = 50;
-  const paddingRight = 10;
+  const height = 240;
+  const paddingLeft = 60;
+  const paddingRight = 20;
   const paddingTop = 20;
-  const paddingBottom = 35;
+  const paddingBottom = 50;
 
   const chartHeight = height - paddingTop - paddingBottom;
+  const graphWidth = Math.max(400, data.labels.length * 90);
+
+  const MAX = 1279958; // Slightly above max in image
+  const barWidth = 16;
+  const groupGap = 20;
+  const groupWidth = barWidth * 2 + 4 + groupGap;
 
-  const MAX = 1000000; // 1.0M
-  const barWidth = 14;
+  const y = (v) => paddingTop + ((MAX - v) / MAX) * chartHeight;
 
-  const y = (v) =>
-    paddingTop + ((MAX - v) / MAX) * chartHeight;
+  const getX = (i) => paddingLeft + i * groupWidth + groupGap / 2;
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{data.title}</Text>
 
       <View style={{ flexDirection: 'row' }}>
-        {/* FIXED Y AXIS */}
         <Svg width={paddingLeft} height={height}>
-          {[1000000, 500000, 0].map((v, i) => (
+          {[1000000, 500000, 0].map((v) => (
             <SvgText
-              key={i}
-              x={paddingLeft - 6}
-              y={y(v) + 4}
-              fontSize="10"
+              key={v}
+              x={paddingLeft - 8}
+              y={y(v) + 5}
+              fontSize="11"
               textAnchor="end"
               fill="#444"
             >
-              {(v / 1_000_000).toFixed(1)}M
+              {(v / 1000000).toFixed(1)}M
             </SvgText>
           ))}
         </Svg>
 
-        {/* SCROLLABLE GRAPH */}
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <Svg width={graphWidth} height={height}>
-            {/* GRID */}
-            {[1000000, 500000, 0].map((v, i) => (
-              <Line
-                key={i}
-                x1={0}
-                x2={graphWidth}
-                y1={y(v)}
-                y2={y(v)}
-                stroke="#ccc"
-                strokeDasharray="4"
-              />
+            {/* Grid */}
+            {[1000000, 500000, 0].map((v) => (
+              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
             ))}
 
             {data.labels.map((label, i) => {
-              const x = paddingLeft + i * 70;
+              const xCenter = getX(i);
+              const bar2024 = data.series[0].data[i] || 0;
+              const bar2025 = data.series[1].data[i] || 0;
+              const budget = data.series[2].data[i] || 0;
+
+              const height2024 = chartHeight - (y(bar2024) - paddingTop);
+              const height2025 = chartHeight - (y(bar2025) - paddingTop);
 
               return (
                 <React.Fragment key={i}>
-                  {/* 2024 BAR */}
+                  {/* 2024 Bar */}
                   <Rect
-                    x={x}
-                    y={y(data.series[0].data[i])}
+                    x={xCenter - barWidth - 2}
+                    y={y(bar2024)}
                     width={barWidth}
-                    height={chartHeight - (y(data.series[0].data[i]) - paddingTop)}
+                    height={height2024}
                     fill="#E07A3F"
                   />
-
-                  {/* 2025 BAR */}
+                  {bar2024 > MAX * 0.1 && (
+                    <SvgText
+                      x={xCenter - barWidth - 2 + barWidth / 2}
+                      y={y(bar2024) + height2024 / 2 + 5}
+                      fontSize="9"
+                      textAnchor="middle"
+                      fill="white"
+                      fontWeight="700"
+                    >
+                      {formatNumber(bar2024)}
+                    </SvgText>
+                  )}
+
+                  {/* 2025 Bar */}
                   <Rect
-                    x={x + barWidth + 4}
-                    y={y(data.series[1].data[i])}
+                    x={xCenter + 2}
+                    y={y(bar2025)}
                     width={barWidth}
-                    height={chartHeight - (y(data.series[1].data[i]) - paddingTop)}
+                    height={height2025}
                     fill="#4E79A7"
                   />
-
-                  {/* BUDGET DOT + LINE */}
-                  <Circle
-                    cx={x + barWidth}
-                    cy={y(data.series[2].data[i])}
-                    r={4}
-                    fill="#8AB6E8"
-                  />
-
-                  {/* VALUE */}
+                  {bar2025 > MAX * 0.1 && (
+                    <SvgText
+                      x={xCenter + 2 + barWidth / 2}
+                      y={y(bar2025) + height2025 / 2 + 5}
+                      fontSize="9"
+                      textAnchor="middle"
+                      fill="white"
+                      fontWeight="700"
+                    >
+                      {formatNumber(bar2025)}
+                    </SvgText>
+                  )}
+
+                  {/* Budget Line + Dot */}
+                  <Circle cx={xCenter} cy={y(budget)} r={5} fill="#8AB6E8" stroke="#fff" strokeWidth={2} />
                   <SvgText
-                    x={x + barWidth}
-                    y={y(data.series[2].data[i]) - 8}
-                    fontSize="9"
+                    x={xCenter}
+                    y={y(budget) - 10}
+                    fontSize="10"
                     textAnchor="middle"
+                    fill="#333"
+                    fontWeight="700"
                   >
-                    {formatNumber(data.series[2].data[i])}
+                    {formatNumber(budget)}
                   </SvgText>
 
-                  {/* X LABEL */}
+                  {/* X Label */}
                   <SvgText
-                    x={x + barWidth}
-                    y={height - 10}
-                    fontSize="9"
+                    x={xCenter}
+                    y={height - 20}
+                    fontSize="11"
                     textAnchor="middle"
-                    transform={`rotate(-30 ${x + barWidth} ${height - 10})`}
+                    fill="#555"
+                    transform={`rotate(-45 ${xCenter} ${height - 20})`}
                   >
                     {label}
                   </SvgText>
@@ -117,15 +135,10 @@ const SvgBarLineChartCompact = ({ data }) => {
         </ScrollView>
       </View>
 
-      {/* LEGEND */}
       <View style={styles.legend}>
-        <Text style={{ color: '#E07A3F' }}>● {data.series[0].name}</Text>
-        <Text style={{ color: '#4E79A7', marginLeft: 12 }}>
-          ● {data.series[1].name}
-        </Text>
-        <Text style={{ color: '#8AB6E8', marginLeft: 12 }}>
-          ● {data.series[2].name}
-        </Text>
+        <Text style={{ color: '#E07A3F', marginRight: 16 }}>● {data.series[0].name}</Text>
+        <Text style={{ color: '#4E79A7', marginRight: 16 }}>● {data.series[1].name}</Text>
+        <Text style={{ color: '#8AB6E8' }}>● {data.series[2].name}</Text>
       </View>
     </View>
   );

package/src/components/SvgLineChartCompact.jsx

@@ -7,43 +7,38 @@ const SvgLineChartCompact = ({ data }) => {
   if (!data?.series || !data.labels?.length) return null;
 
   const height = 200;
-  const graphWidth = Math.max(320, data.labels.length * 70);
-
-  const paddingLeft = 50;   // Y axis space
-  const paddingRight = 10;
+  const paddingLeft = 60;
+  const paddingRight = 20;
   const paddingTop = 20;
-  const paddingBottom = 35;
+  const paddingBottom = 40;
+
+  const chartHeight = height - paddingTop - paddingBottom;
+  const graphWidth = Math.max(400, data.labels.length * 80);
 
   // FIXED AXIS (as per image)
   const MIN = 5000;
   const MAX = 10000;
 
-  const chartHeight = height - paddingTop - paddingBottom;
-  const xStep =
-    data.labels.length === 1
-      ? 0
-      : (graphWidth - paddingLeft - paddingRight) /
-        (data.labels.length - 1);
+  const y = (v) => paddingTop + ((MAX - Math.max(MIN, Math.min(MAX, v))) / (MAX - MIN)) * chartHeight;
 
-  const y = (v) =>
-    paddingTop +
-    ((MAX - v) / (MAX - MIN)) * chartHeight;
+ // Fix for single point: use fixed spacing
+  const totalPoints = data.labels.length;
+  const xStep = totalPoints === 1 ? 0 : (graphWidth - paddingLeft - paddingRight) / (totalPoints - 1);
 
-  const colors = ['#E07A3F', '#4E79A7']; // orange / blue
+  const colors = ['#E07A3F', '#4E79A7'];// orange / blue
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{data.title}</Text>
 
       <View style={{ flexDirection: 'row' }}>
-        {/* FIXED Y AXIS */}
         <Svg width={paddingLeft} height={height}>
-          {[10000, 5000].map((v, i) => (
+          {[10000, 5000].map((v) => (
             <SvgText
-              key={i}
-              x={paddingLeft - 6}
-              y={y(v) + 4}
-              fontSize="10"
+              key={v}
+              x={paddingLeft - 8}
+              y={y(v) + 5}
+              fontSize="11"
               textAnchor="end"
               fill="#444"
             >
@@ -52,55 +47,33 @@ const SvgLineChartCompact = ({ data }) => {
           ))}
         </Svg>
 
-        {/* SCROLLABLE GRAPH */}
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <Svg width={graphWidth} height={height}>
-            {/* GRID LINES */}
-            {[10000, 5000].map((v, i) => (
-              <Line
-                key={i}
-                x1={0}
-                x2={graphWidth}
-                y1={y(v)}
-                y2={y(v)}
-                stroke="#ccc"
-                strokeDasharray="4"
-              />
+            {/* Grid */}
+            {[10000, 5000].map((v) => (
+              <Line key={v} x1={0} x2={graphWidth} y1={y(v)} y2={y(v)} stroke="#eee" strokeDasharray="5,5" />
             ))}
 
-            {/* LINES + DOTS */}
-            {data.series.map((s, si) =>
-              s.data.map((val, i) => {
-                const x =
-                  paddingLeft + (data.labels.length === 1 ? 0 : i * xStep);
-                const yVal = y(val);
+            {/* Series */}
+            {data.series.map((series, si) =>
+              series.data.map((val, i) => {
+                const x = paddingLeft + i * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep);
 
                 return (
                   <React.Fragment key={`${si}-${i}`}>
-                    {/* CONNECTING LINE */}
-                    {i < s.data.length - 1 && (
+                    {i > 0 && (
                       <Line
-                        x1={x}
-                        y1={yVal}
-                        x2={paddingLeft + (i + 1) * xStep}
-                        y2={y(s.data[i + 1])}
+                        x1={paddingLeft + (i - 1) * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep)}
+                        y1={y(series.data[i - 1])}
+                        x2={x}
+                        y2={y(val)}
                         stroke={colors[si]}
-                        strokeWidth={2}
-                        strokeDasharray={si === 0 ? '4' : '0'}
+                        strokeWidth={2.5}
+                        strokeDasharray={si === 0 ? '6,4' : '0'}
                       />
                     )}
-
-                    {/* DOT */}
-                    <Circle cx={x} cy={yVal} r={4} fill={colors[si]} />
-
-                    {/* VALUE */}
-                    <SvgText
-                      x={x}
-                      y={yVal - 8}
-                      fontSize="9"
-                      textAnchor="middle"
-                      fill="#333"
-                    >
+                    <Circle cx={x} cy={y(val)} r={5} fill={colors[si]} />
+                    <SvgText x={x} y={y(val) - 10} fontSize="10" textAnchor="middle" fill="#333">
                       {formatNumber(val)}
                     </SvgText>
                   </React.Fragment>
@@ -108,18 +81,18 @@ const SvgLineChartCompact = ({ data }) => {
               })
             )}
 
-            {/* X AXIS LABELS */}
+            {/* X Labels */}
             {data.labels.map((label, i) => {
-              const x =
-                paddingLeft + (data.labels.length === 1 ? 0 : i * xStep);
+              const x = paddingLeft + i * (totalPoints === 1 ? graphWidth / 2 - paddingLeft : xStep);
               return (
                 <SvgText
                   key={i}
                   x={x}
-                  y={height - 10}
-                  fontSize="9"
+                  y={height - 15}
+                  fontSize="11"
                   textAnchor="middle"
-                  transform={`rotate(-30 ${x} ${height - 10})`}
+                  fill="#555"
+                  transform={`rotate(-45 ${x} ${height - 15})`}
                 >
                   {label}
                 </SvgText>
@@ -129,12 +102,12 @@ const SvgLineChartCompact = ({ data }) => {
         </ScrollView>
       </View>
 
-      {/* LEGEND */}
       <View style={styles.legend}>
-        <Text style={{ color: colors[0] }}>● {data.series[0].name}</Text>
-        <Text style={{ color: colors[1], marginLeft: 16 }}>
-          ● {data.series[1].name}
-        </Text>
+        {data.series.map((s, i) => (
+          <Text key={i} style={{ color: colors[i], marginRight: 16 }}>
+            ● {s.name}
+          </Text>
+        ))}
       </View>
     </View>
   );

package/src/screens/Report2AScreen.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-
+import { filterChartByMonths } from '../utils/filterChartByMonths';
 import { getDivisions, getTable, getLine, getBar } from '../api/report2Fetcher';
 import MonthFilterModal from '../components/MonthFilterModal';
 import DivisionFilterModal from '../components/DivisionFilterModal';
@@ -24,12 +24,13 @@ const Report2AScreen = ({ api, token, onBack }) => {
   useEffect(() => {
     getDivisions(api.divisions, token).then(d => {
       setDivisions(d);
-      setDivision(d[0]?.code);
+      if (d.length > 0) setDivision(d[0]?.code);
     });
-  }, []);
+  }, [api.divisions, token]);
 
   useEffect(() => {
     if (!division) return;
+
     Promise.all([
       getTable(api.table, division, token),
       getLine(api.line, division, token),
@@ -39,44 +40,50 @@ const Report2AScreen = ({ api, token, onBack }) => {
       setLine(l);
       setBar(b);
       setMonths(l.labels);
-      setSelectedMonths(l.labels);
+      setSelectedMonths(l.labels); // default: all selected
     });
-  }, [division]);
+  }, [division, api, token]);
 
-  if (!table || !line || !bar) return null;
+  if (!table || !line || !bar || !division) return null;
 
-  const rows = table.rows.filter(r =>
+  const filteredRows = table.rows.filter(r =>
     selectedMonths.includes(r.monthLabel)
   );
 
+  const filteredLine = filterChartByMonths(line, selectedMonths);
+  const filteredBar = filterChartByMonths(bar, selectedMonths);
+
   return (
     <ScrollView style={{ padding: 12 }}>
-      <Text onPress={onBack}>‹ Back</Text>
+      <Text onPress={onBack} style={{ fontSize: 18, marginBottom: 12 }}>
+        ‹ Back
+      </Text>
 
-      {/* FILTER BAR */}
-      <View style={{ flexDirection: 'row', marginVertical: 6 }}>
+      {/* FILTER BUTTONS */}
+      <View style={{ flexDirection: 'row', marginVertical: 10, gap: 16 }}>
         <TouchableOpacity onPress={() => setMonthsModal(true)}>
-          <Text>Months ⛃</Text>
+          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Months ⛃</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity
-          onPress={() => setDivisionModal(true)}
-          style={{ marginLeft: 16 }}
-        >
-          <Text>Divisions ⛃</Text>
+        <TouchableOpacity onPress={() => setDivisionModal(true)}>
+          <Text style={{ fontSize: 16, color: '#1e88e5' }}>Divisions ⛃</Text>
         </TouchableOpacity>
       </View>
 
-      <FrozenTableReport2A rows={rows} />
+      {/* TABLE */}
+      <FrozenTableReport2A rows={filteredRows} />
 
-      <View style={{ borderTopWidth: 1, borderBottomWidth: 1, marginVertical: 6 }}>
-        <SvgLineChartCompact data={line} />
+      {/* LINE CHART */}
+      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+        <SvgLineChartCompact data={filteredLine} />
       </View>
 
-      <View style={{ borderTopWidth: 1, borderBottomWidth: 1, marginVertical: 6 }}>
-        <SvgBarLineChartCompact data={bar} />
+      {/* BAR + LINE CHART */}
+      <View style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, marginVertical: 12 }}>
+        <SvgBarLineChartCompact data={filteredBar} />
       </View>
 
+      {/* MODALS */}
       <MonthFilterModal
         visible={monthsModal}
         months={months}
@@ -96,4 +103,4 @@ const Report2AScreen = ({ api, token, onBack }) => {
   );
 };
 
-export default Report2AScreen;
+export default Report2AScreen;

package/src/utils/filterChartByMonths.js

@@ -0,0 +1,16 @@
+export const filterChartByMonths = (chart, selectedMonths) => {
+  if (!selectedMonths || selectedMonths.length === 0) return chart;
+
+  const indices = chart.labels
+    .map((label, i) => (selectedMonths.includes(label) ? i : -1))
+    .filter(i => i !== -1);
+
+  return {
+    ...chart,
+    labels: indices.map(i => chart.labels[i]),
+    series: chart.series.map(s => ({
+      ...s,
+      data: indices.map(i => s.data[i]),
+    })),
+  };
+};