iph-chart 0.1.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iph-chart",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "creates charts and transforms user data into visual components",
   "main": "src/index.js",
   "types": "index.d.ts",
@@ -11,7 +11,8 @@
     "src"
   ],
   "scripts": {
-    "test": "npm run test"
+    "test": "npm run test",
+    "build": "echo \"No build step needed for now\""
   },
   "repository": {
     "type": "git",

package/src/index.js

@@ -1,29 +1,60 @@
-function createLineChartConfig(labels, data, title = "Chart") {
-    return {
-      type: "line",
-      data: {
-        labels,
-        datasets: [
-          {
-            label: title,
-            data,
-            borderWidth: 2,
-            fill: false
-          }
-        ]
-      },
-      options: {
-        responsive: true,
-        plugins: {
-          legend: { display: true },
-          tooltip: {
-            enabled: true
-          }
-        }
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, registerables } from 'chart.js';
+
+ChartJS.register(...registerables);
+
+export const IphLineChart = ({ 
+  jsonData, 
+  labelKey, 
+  dataKey, 
+  title = "Dataset",
+  color = "#3b82f6",
+  showCrosshair = true,
+  showTooltip = true
+}) => {
+  if (!jsonData || jsonData.length === 0) return <div>No data found</div>;
+
+  const data = {
+    labels: jsonData.map(item => item[labelKey]),
+    datasets: [{
+      label: title,
+      data: jsonData.map(item => item[dataKey]),
+      borderColor: color,
+      backgroundColor: color + '33', 
+      fill: true,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+      borderWidth: 2,
+      tension: 0.4, 
+    }]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: true, position: 'top' },
+      tooltip: {
+        enabled: showTooltip,
+        intersect: false, 
+        mode: 'index',
       }
-    };
-  }
-  
-  module.exports = {
-    createLineChartConfig
-  };
+    },
+    scales: {
+      x: { grid: { display: false } },
+      y: { beginAtZero: true }
+    },
+    interaction: {
+      mode: 'index',
+      intersect: false,
+    },
+   
+    hover: {
+      mode: 'index',
+      intersect: false
+    }
+  };
+
+  return <Line data={data} options={options} />;
+};