insight-react-sdk 1.0.0

package/README.md

@@ -0,0 +1,147 @@
+# Insight React SDK
+
+A lightweight, extensible **React frontend SDK** for rendering analytical insights such as **trend** and **contributor** views from raw metric data.  
+The SDK abstracts data transformation, time handling, and visualization selection to provide a clean, developer friendly API.
+
+
+## Features
+
+- **Single public API**: `<Insight />`
+- **Backend-agnostic** via resolver functions
+- SDK-owned **time range calculation**
+- Dedicated **data transformation layer**
+- Automatic **chart selection** based on insight type
+- Clear separation of responsibilities:
+  - data fetching
+  - transformation
+  - visualization
+-  Built-in loading, error, and empty states
+-  Easy to extend with new insight types
+
+---
+
+## Installation
+
+```
+npm install insight-react-sdk
+```
+## usage    
+
+### Step 1: Import the Insight component
+```
+import { Insight } from "insight-react-sdk";
+```
+
+### Step 2: Implement a data resolver
+
+The resolver is responsible for returning raw metric data.
+The SDK handles everything else.
+
+```
+
+const dataResolver = async (metric, grain, fromTime, toTime) => {
+  return [
+    { fromtime: "01-01-2025", totime: "07-01-2025", Revenue: 120 },
+    { fromtime: "08-01-2025", totime: "14-01-2025", Revenue: 180 },
+  ];
+};
+```
+
+### Step 3: Render a Trend Insight
+```
+export default function TrendExample() {
+  return (
+    <Insight
+      type="trend"
+      metric="Revenue"
+      timeGrain="weekly"
+      timeRange={30}
+      dataResolver={dataResolver}
+    />
+  );
+}
+```
+
+### Step 4: Render a Contributor Insight
+
+For contributor insights, provide a dimension and a dimension values resolver.
+```
+const contributorDataResolver = async (metric, grain, fromTime, toTime) => {
+  return [
+    { fromtime: "01-01-2025", totime: "07-01-2025", India: 60, USA: 40 },
+    { fromtime: "08-01-2025", totime: "14-01-2025", India: 30, USA: 70 },
+  ];
+};
+```
+```
+const dimensionValuesResolver = async () => {
+  return ["India", "USA"];
+};
+```
+```
+export default function ContributorExample() {
+  return (
+    <Insight
+      type="contributor"
+      metric="Revenue"
+      dimension="location"
+      timeGrain="weekly"
+      timeRange={30}
+      dataResolver={contributorDataResolver}
+      dimensionValuesResolver={dimensionValuesResolver}
+    />
+  );
+}
+```
+## Insight Types
+
+### Trend Insight
+
+- Displays how a single metric changes over time
+
+- Uses line/area visualization
+
+- X-axis represents time
+
+- Y-axis represents the metric value
+
+### Contributor Insight
+
+- Displays how different dimension values contribute to a metric
+
+- Uses stacked bar visualization
+
+- Each dimension value is rendered as a separate series
+
+
+## Time Handling
+
+- timeRange is specified in days
+
+- The SDK calculates fromTime and toTime internally
+
+- timeGrain controls aggregation semantics
+
+- Monthly insights display labels as Jan 2025, Feb 2025, etc.
+
+- Daily and weekly labels are passed through as provided
+
+## Extensibility
+
+- New insight types can be added by:
+
+- Creating a new transformer
+
+- Creating a corresponding chart
+
+- Registering both internally
+
+- No changes are required in the public API.
+
+## Notes
+
+- The SDK does not perform data fetching directly
+
+- The consuming application controls data sources
+
+- No external date or chart configuration libraries are required

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type InsightType = "trend" | "contributor";
+type TimeGrain = "daily" | "weekly" | "monthly";
+interface BaseInsightProps {
+    metric: string;
+    timeGrain: TimeGrain;
+    timeRange: number;
+}
+type DataResolver = (metric: string, grain: TimeGrain, fromTime: Date, toTime: Date) => Promise<Record<string, any>[]>;
+type DimensionValuesResolver = (metric: string, dimension: string) => Promise<string[]>;
+interface InsightProps extends BaseInsightProps {
+    type: InsightType;
+    dimension?: string;
+    dataResolver: DataResolver;
+    dimensionValuesResolver?: DimensionValuesResolver;
+}
+interface TimeRange {
+    fromTime: Date;
+    toTime: Date;
+}
+interface TrendPoint {
+    x: string;
+    y: number;
+}
+interface ChartProps {
+    title: string;
+}
+interface ContributorSeries {
+    id: string;
+    label: string;
+    color: string;
+}
+interface TrendChartProps extends ChartProps {
+    data: TrendPoint[];
+}
+interface ContributorChartProps extends ChartProps {
+    data: Record<string, number | string>[];
+    series: ContributorSeries[];
+}
+type TransformedInsightData = TrendChartProps | ContributorChartProps;
+
+declare function Insight(props: InsightProps): react_jsx_runtime.JSX.Element;
+
+export { type BaseInsightProps, type ChartProps, type ContributorChartProps, type ContributorSeries, type DataResolver, type DimensionValuesResolver, Insight, type InsightProps, type InsightType, type TimeGrain, type TimeRange, type TransformedInsightData, type TrendChartProps, type TrendPoint };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type InsightType = "trend" | "contributor";
+type TimeGrain = "daily" | "weekly" | "monthly";
+interface BaseInsightProps {
+    metric: string;
+    timeGrain: TimeGrain;
+    timeRange: number;
+}
+type DataResolver = (metric: string, grain: TimeGrain, fromTime: Date, toTime: Date) => Promise<Record<string, any>[]>;
+type DimensionValuesResolver = (metric: string, dimension: string) => Promise<string[]>;
+interface InsightProps extends BaseInsightProps {
+    type: InsightType;
+    dimension?: string;
+    dataResolver: DataResolver;
+    dimensionValuesResolver?: DimensionValuesResolver;
+}
+interface TimeRange {
+    fromTime: Date;
+    toTime: Date;
+}
+interface TrendPoint {
+    x: string;
+    y: number;
+}
+interface ChartProps {
+    title: string;
+}
+interface ContributorSeries {
+    id: string;
+    label: string;
+    color: string;
+}
+interface TrendChartProps extends ChartProps {
+    data: TrendPoint[];
+}
+interface ContributorChartProps extends ChartProps {
+    data: Record<string, number | string>[];
+    series: ContributorSeries[];
+}
+type TransformedInsightData = TrendChartProps | ContributorChartProps;
+
+declare function Insight(props: InsightProps): react_jsx_runtime.JSX.Element;
+
+export { type BaseInsightProps, type ChartProps, type ContributorChartProps, type ContributorSeries, type DataResolver, type DimensionValuesResolver, Insight, type InsightProps, type InsightType, type TimeGrain, type TimeRange, type TransformedInsightData, type TrendChartProps, type TrendPoint };

package/dist/index.js

@@ -0,0 +1,286 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Insight: () => Insight
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core/errors.ts
+var SDKError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "SDKError";
+  }
+};
+var ValidationError = class extends SDKError {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+  }
+};
+
+// src/utils/validation.ts
+function validateInsightProps(props) {
+  if (!props.metric) {
+    throw new ValidationError("metric is required");
+  }
+  if (props.type === "contributor" && !props.dimension) {
+    throw new ValidationError(
+      "dimension is required when type is 'contributor'"
+    );
+  }
+  if (!props.dataResolver) {
+    throw new ValidationError("dataResolver is required");
+  }
+}
+
+// src/hooks/useTimeRange.ts
+var import_react = require("react");
+
+// src/utils/time.ts
+var calculateTimeRange = (days) => {
+  const toTime = /* @__PURE__ */ new Date();
+  const fromTime = /* @__PURE__ */ new Date();
+  fromTime.setDate(toTime.getDate() - days);
+  return { fromTime, toTime };
+};
+function formatTimeLabel(rawDate, grain) {
+  if (grain !== "monthly") {
+    return rawDate;
+  }
+  const [day, month, year] = rawDate.split("-");
+  const isoDate = `${year}-${month}-${day}`;
+  const date = new Date(isoDate);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    year: "numeric"
+  });
+}
+
+// src/hooks/useTimeRange.ts
+function useTimeRange(timeRange) {
+  return (0, import_react.useMemo)(() => calculateTimeRange(timeRange), [timeRange]);
+}
+
+// src/hooks/useInsightData.ts
+var import_react2 = require("react");
+
+// src/transformers/contributor.transformer.ts
+var DEFAULT_COLORS = ["#9acbdc", "#f6b1ac", "#8da2fb", "#1f3b63"];
+var transformContributorData = (raw, ctx) => {
+  const data = raw.map((row) => {
+    const point = {
+      x: formatTimeLabel(row.fromtime, ctx.timeGrain)
+    };
+    ctx.dimensionValues.forEach((dim) => {
+      var _a;
+      point[dim] = (_a = row[dim]) != null ? _a : 0;
+    });
+    return point;
+  });
+  const series = ctx.dimensionValues.map((dim, index) => ({
+    id: dim,
+    label: dim,
+    color: DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+  }));
+  return {
+    title: `${ctx.metric} by ${ctx.dimension}`,
+    data,
+    series
+  };
+};
+
+// src/transformers/trend.transformer.ts
+var transformTrendData = (raw, ctx) => {
+  return {
+    title: ctx.metric,
+    data: raw.map((bucket) => ({
+      x: formatTimeLabel(bucket.fromtime, ctx.timeGrain),
+      y: bucket[ctx.metric]
+    }))
+  };
+};
+
+// src/registry/transformerRegistry.ts
+var transformerRegistry = {
+  trend: transformTrendData,
+  contributor: transformContributorData
+};
+
+// src/hooks/useInsightData.ts
+function useInsightData(props, fromTime, toTime) {
+  const [data, setData] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    let mounted = true;
+    async function run() {
+      try {
+        setLoading(true);
+        setError(null);
+        const rawData = await props.dataResolver(
+          props.metric,
+          props.timeGrain,
+          fromTime,
+          toTime
+        );
+        let dimensionValues = [];
+        if (props.type === "contributor" && props.dimensionValuesResolver) {
+          dimensionValues = await props.dimensionValuesResolver(
+            props.metric,
+            props.dimension
+          );
+        }
+        const transformer = transformerRegistry[props.type];
+        const transformed = transformer(rawData, {
+          metric: props.metric,
+          dimension: props.dimension,
+          dimensionValues,
+          timeGrain: props.timeGrain
+        });
+        if (mounted) setData(transformed);
+      } catch (e) {
+        if (mounted) setError(e);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+    run();
+    return () => {
+      mounted = false;
+    };
+  }, [
+    props.type,
+    props.metric,
+    props.dimension,
+    props.timeGrain,
+    props.dataResolver,
+    props.dimensionValuesResolver,
+    fromTime,
+    toTime
+  ]);
+  return { data, loading, error };
+}
+
+// src/states/loading.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Loading = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Loading insight\u2026" });
+
+// src/states/error.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorState = ({ error }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+  "Error: ",
+  error.message
+] });
+
+// src/states/empty.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Empty = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "No data available" });
+
+// src/charts/contributorChart.tsx
+var import_recharts = require("recharts");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ContributorChart({
+  title,
+  data,
+  series
+}) {
+  if (!data.length || !series.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.ResponsiveContainer, { width: "100%", minHeight: 300, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts.BarChart, { data, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.XAxis, { dataKey: "x" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.YAxis, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.Tooltip, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts.Legend, {}),
+      series.map((s) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_recharts.Bar,
+          {
+            dataKey: s.id,
+            stackId: "total",
+            fill: s.color,
+            name: (_a = s.label) != null ? _a : s.id
+          },
+          s.id
+        );
+      })
+    ] }) })
+  ] });
+}
+
+// src/charts/trendChart.tsx
+var import_recharts2 = require("recharts");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TrendChart({ title, data }) {
+  if (!data.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", minHeight: 300, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts2.AreaChart, { data, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("linearGradient", { id: "trendGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", stopColor: "#1e3a8a", stopOpacity: 0.25 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", stopColor: "#1e3a8a", stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts2.XAxis, { dataKey: "x" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts2.YAxis, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts2.Tooltip, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_recharts2.Area,
+        {
+          type: "monotone",
+          dataKey: "y",
+          stroke: "#1e3a8a",
+          strokeWidth: 2,
+          fill: "url(#trendGradient)",
+          dot: false
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/registry/insightRegistry.ts
+var insightRegistry = {
+  trend: TrendChart,
+  contributor: ContributorChart
+};
+
+// src/Insight.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Insight(props) {
+  (0, import_react3.useMemo)(() => validateInsightProps(props), [props]);
+  const { fromTime, toTime } = useTimeRange(props.timeRange);
+  const { data, loading, error } = useInsightData(props, fromTime, toTime);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, {});
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorState, { error });
+  if (!data) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Empty, {});
+  const Chart = insightRegistry[props.type];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Chart, { ...data });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Insight
+});

package/dist/index.mjs

@@ -0,0 +1,276 @@
+// src/core/errors.ts
+var SDKError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "SDKError";
+  }
+};
+var ValidationError = class extends SDKError {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+  }
+};
+
+// src/utils/validation.ts
+function validateInsightProps(props) {
+  if (!props.metric) {
+    throw new ValidationError("metric is required");
+  }
+  if (props.type === "contributor" && !props.dimension) {
+    throw new ValidationError(
+      "dimension is required when type is 'contributor'"
+    );
+  }
+  if (!props.dataResolver) {
+    throw new ValidationError("dataResolver is required");
+  }
+}
+
+// src/hooks/useTimeRange.ts
+import { useMemo } from "react";
+
+// src/utils/time.ts
+var calculateTimeRange = (days) => {
+  const toTime = /* @__PURE__ */ new Date();
+  const fromTime = /* @__PURE__ */ new Date();
+  fromTime.setDate(toTime.getDate() - days);
+  return { fromTime, toTime };
+};
+function formatTimeLabel(rawDate, grain) {
+  if (grain !== "monthly") {
+    return rawDate;
+  }
+  const [day, month, year] = rawDate.split("-");
+  const isoDate = `${year}-${month}-${day}`;
+  const date = new Date(isoDate);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    year: "numeric"
+  });
+}
+
+// src/hooks/useTimeRange.ts
+function useTimeRange(timeRange) {
+  return useMemo(() => calculateTimeRange(timeRange), [timeRange]);
+}
+
+// src/hooks/useInsightData.ts
+import { useEffect, useState } from "react";
+
+// src/transformers/contributor.transformer.ts
+var DEFAULT_COLORS = ["#9acbdc", "#f6b1ac", "#8da2fb", "#1f3b63"];
+var transformContributorData = (raw, ctx) => {
+  const data = raw.map((row) => {
+    const point = {
+      x: formatTimeLabel(row.fromtime, ctx.timeGrain)
+    };
+    ctx.dimensionValues.forEach((dim) => {
+      var _a;
+      point[dim] = (_a = row[dim]) != null ? _a : 0;
+    });
+    return point;
+  });
+  const series = ctx.dimensionValues.map((dim, index) => ({
+    id: dim,
+    label: dim,
+    color: DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+  }));
+  return {
+    title: `${ctx.metric} by ${ctx.dimension}`,
+    data,
+    series
+  };
+};
+
+// src/transformers/trend.transformer.ts
+var transformTrendData = (raw, ctx) => {
+  return {
+    title: ctx.metric,
+    data: raw.map((bucket) => ({
+      x: formatTimeLabel(bucket.fromtime, ctx.timeGrain),
+      y: bucket[ctx.metric]
+    }))
+  };
+};
+
+// src/registry/transformerRegistry.ts
+var transformerRegistry = {
+  trend: transformTrendData,
+  contributor: transformContributorData
+};
+
+// src/hooks/useInsightData.ts
+function useInsightData(props, fromTime, toTime) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    async function run() {
+      try {
+        setLoading(true);
+        setError(null);
+        const rawData = await props.dataResolver(
+          props.metric,
+          props.timeGrain,
+          fromTime,
+          toTime
+        );
+        let dimensionValues = [];
+        if (props.type === "contributor" && props.dimensionValuesResolver) {
+          dimensionValues = await props.dimensionValuesResolver(
+            props.metric,
+            props.dimension
+          );
+        }
+        const transformer = transformerRegistry[props.type];
+        const transformed = transformer(rawData, {
+          metric: props.metric,
+          dimension: props.dimension,
+          dimensionValues,
+          timeGrain: props.timeGrain
+        });
+        if (mounted) setData(transformed);
+      } catch (e) {
+        if (mounted) setError(e);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+    run();
+    return () => {
+      mounted = false;
+    };
+  }, [
+    props.type,
+    props.metric,
+    props.dimension,
+    props.timeGrain,
+    props.dataResolver,
+    props.dimensionValuesResolver,
+    fromTime,
+    toTime
+  ]);
+  return { data, loading, error };
+}
+
+// src/states/loading.tsx
+import { jsx } from "react/jsx-runtime";
+var Loading = () => /* @__PURE__ */ jsx("div", { children: "Loading insight\u2026" });
+
+// src/states/error.tsx
+import { jsxs } from "react/jsx-runtime";
+var ErrorState = ({ error }) => /* @__PURE__ */ jsxs("div", { children: [
+  "Error: ",
+  error.message
+] });
+
+// src/states/empty.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Empty = () => /* @__PURE__ */ jsx2("div", { children: "No data available" });
+
+// src/charts/contributorChart.tsx
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+  Legend
+} from "recharts";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContributorChart({
+  title,
+  data,
+  series
+}) {
+  if (!data.length || !series.length) return null;
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3("h3", { style: { marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ jsx3(ResponsiveContainer, { width: "100%", minHeight: 300, children: /* @__PURE__ */ jsxs2(BarChart, { data, children: [
+      /* @__PURE__ */ jsx3(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ jsx3(XAxis, { dataKey: "x" }),
+      /* @__PURE__ */ jsx3(YAxis, {}),
+      /* @__PURE__ */ jsx3(Tooltip, {}),
+      /* @__PURE__ */ jsx3(Legend, {}),
+      series.map((s) => {
+        var _a;
+        return /* @__PURE__ */ jsx3(
+          Bar,
+          {
+            dataKey: s.id,
+            stackId: "total",
+            fill: s.color,
+            name: (_a = s.label) != null ? _a : s.id
+          },
+          s.id
+        );
+      })
+    ] }) })
+  ] });
+}
+
+// src/charts/trendChart.tsx
+import {
+  AreaChart,
+  Area,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  Tooltip as Tooltip2,
+  ResponsiveContainer as ResponsiveContainer2,
+  CartesianGrid as CartesianGrid2
+} from "recharts";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function TrendChart({ title, data }) {
+  if (!data.length) return null;
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx4("h3", { style: { marginBottom: 8 }, children: title }),
+    /* @__PURE__ */ jsx4(ResponsiveContainer2, { width: "100%", minHeight: 300, children: /* @__PURE__ */ jsxs3(AreaChart, { data, children: [
+      /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: "trendGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: "#1e3a8a", stopOpacity: 0.25 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: "#1e3a8a", stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx4(CartesianGrid2, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ jsx4(XAxis2, { dataKey: "x" }),
+      /* @__PURE__ */ jsx4(YAxis2, {}),
+      /* @__PURE__ */ jsx4(Tooltip2, {}),
+      /* @__PURE__ */ jsx4(
+        Area,
+        {
+          type: "monotone",
+          dataKey: "y",
+          stroke: "#1e3a8a",
+          strokeWidth: 2,
+          fill: "url(#trendGradient)",
+          dot: false
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/registry/insightRegistry.ts
+var insightRegistry = {
+  trend: TrendChart,
+  contributor: ContributorChart
+};
+
+// src/Insight.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Insight(props) {
+  useMemo2(() => validateInsightProps(props), [props]);
+  const { fromTime, toTime } = useTimeRange(props.timeRange);
+  const { data, loading, error } = useInsightData(props, fromTime, toTime);
+  if (loading) return /* @__PURE__ */ jsx5(Loading, {});
+  if (error) return /* @__PURE__ */ jsx5(ErrorState, { error });
+  if (!data) return /* @__PURE__ */ jsx5(Empty, {});
+  const Chart = insightRegistry[props.type];
+  return /* @__PURE__ */ jsx5(Chart, { ...data });
+}
+export {
+  Insight
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "insight-react-sdk",
+  "version": "1.0.0",
+  "description": "React SDK for rendering insights",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [
+    "react",
+    "sdk",
+    "charts",
+    "analytics",
+    "insights",
+    "frontend"
+  ],
+  "author": "Anvesh Ramelli",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "recharts": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "recharts": "^3.6.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}