blixify-ui-web-mcp 0.1.1

package/lib/components/chart/lineChart/lineChart.stories.tsx

@@ -0,0 +1,152 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useCallback, useEffect, useState } from "react";
+import { LineChart } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const multiLineSeries = [
+  { name: "High - 2013", data: [-50, 29.1, 33.453, 60.09, 32, 32, 90] },
+  { name: "Low - 2013", data: [12, 60, 14, 18, 17, 70, 13] },
+];
+
+stories.add("Line Chart", () => {
+  const [seriesData, setSeriesData] = useState([12, 60, 14, 18, 17]);
+  const [categoryData, setCategoryData] = useState<string[]>([
+    "JAN",
+    "FEB",
+    "MAR",
+    "APR",
+    "MAY",
+  ]);
+
+  const handleSetData = useCallback((customDate?: RangeInterface) => {
+    if (customDate?.isDuration) {
+      const dateArray: string[] = [];
+      const dummyData: number[] = [];
+      const current = new Date(customDate.startDate);
+      let i = 0;
+      while (current <= customDate.endDate) {
+        dateArray.push(new Date(current).toDateString());
+        dummyData.push(i++);
+        current.setDate(current.getDate() + 1);
+      }
+      setCategoryData(dateArray);
+      setSeriesData(dummyData);
+    }
+  }, []);
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+    <div className="font-sans max-w-3xl p-6">
+      <StorySection
+        title="Single Line"
+        description={
+          <>
+            Basic line chart using <code>seriesData</code> (number array) and{" "}
+            <code>categories</code> (string array). <code>xaxisTitle</code> and{" "}
+            <code>yaxisTitle</code> label the axes. Use{" "}
+            <code>showDataLabels</code> to show values on each point, and{" "}
+            <code>dataLabels</code> to add custom annotation labels at specific
+            coordinates.
+          </>
+        }
+      >
+        <LineChart
+          title="Sales of the Year"
+          categories={categoryData}
+          seriesData={seriesData}
+          seriesName="Value"
+          xaxisTitle="Date"
+          yaxisTitle="Value"
+          showDataLabels={true}
+          disableZoom
+          yMin={0}
+          hideGrid
+          hideOriginBorder
+          hideShadow
+          dataLabels={[
+            {
+              x: "APR",
+              y: 18,
+              name: "BEST",
+              offsetY: -10,
+              style: { color: "#fff", fontSize: "13px", background: "#00E396" },
+            },
+          ]}
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          onChangeDate={handleSetData}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Multi-Line"
+        description={
+          <>
+            Use <code>multiLineSeries</code> (array of{" "}
+            <code>&#123; name, data: number[] &#125;</code>) for multiple lines.
+            Set <code>chartController=&#123;true&#125;</code> with a matching{" "}
+            <code>chartId</code> to render a brush/zoom controller below the
+            main chart. Requires <code>enableGradient</code> and{" "}
+            <code>darkMode</code> shown here too.
+          </>
+        }
+      >
+        <LineChart
+          title="Temperature of the Year"
+          categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}
+          multiLineSeries={multiLineSeries}
+          xaxisTitle="Months"
+          yaxisTitle="Temperature"
+          enableGradient={true}
+          showToolbar={true}
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          chartId="chartMultiline"
+          chartController={true}
+          darkMode={true}
+          darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+          borderColor=""
+          onChangeDate={handleSetData}
+          decimalPlaces={2}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Line Only (no area fill)"
+        description={
+          <>
+            Set <code>disableAreaChart=&#123;true&#125;</code> to render a pure
+            line without the area fill underneath. Combine with{" "}
+            <code>hideShadow</code> for a clean look.
+          </>
+        }
+      >
+        <LineChart
+          title="Revenue Trend"
+          categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
+          seriesData={[30, 45, 38, 60, 55, 72]}
+          seriesName="Revenue"
+          xaxisTitle="Month"
+          yaxisTitle="Revenue"
+          disableAreaChart={true}
+          hideShadow={true}
+          yMin={0}
+        />
+      </StorySection>
+    </div>
+  );
+});

package/lib/components/chart/pieChart/README.md

@@ -0,0 +1,117 @@
+# Pie Chart
+
+<!-- STORY -->
+
+<hr>
+
+A pie/donut chart for displaying proportional data. Supports percentage or raw value display, configurable legend position, dark mode, and an optional date range picker.
+
+##### Import
+
+```js
+import { PieChart } from "blixify-ui-web/chart/pieChart";
+```
+
+##### Usage
+
+Default donut chart:
+
+```jsx
+const [series, setSeries] = useState<number[]>([]);
+const [labels, setLabels] = useState<string[]>([]);
+
+<PieChart
+  title="Sales"
+  series={series}
+  labels={labels}
+  roundValue={true}
+  dateRangeVisible={true}
+  onChangeDate={(range) => handleSetData(range)}
+/>
+```
+
+Pie type with raw value display:
+
+```jsx
+<PieChart
+  title="Sales by Value"
+  series={[10, 20, 5, 15, 55]}
+  labels={["Apple", "Mango", "Orange", "Watermelon", "Banana"]}
+  type="pie"
+  valueType="value"
+  roundValue={true}
+/>
+```
+
+Dark mode:
+
+```jsx
+<PieChart
+  title="Sales"
+  series={series}
+  labels={labels}
+  darkMode={true}
+  darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+  roundValue={true}
+/>
+```
+
+Chart only (no header or date range):
+
+```jsx
+<PieChart
+  title="Sales"
+  series={series}
+  labels={labels}
+  chartOnly={true}
+  chartSize={220}
+/>
+```
+
+##### Required props
+
+| Name     | Type       | Description                                  |
+| -------- | ---------- | -------------------------------------------- |
+| `title`  | `string`   | Title shown in the chart header              |
+| `series` | `number[]` | Numeric value for each slice                 |
+| `labels` | `string[]` | Label for each slice (aligned with `series`) |
+
+##### Optional props
+
+| Name          | Type                                     | Default     | Description                                                   |
+| ------------- | ---------------------------------------- | ----------- | ------------------------------------------------------------- |
+| `type`        | `"pie" \| "donut"`                       | `"donut"`   | Chart type                                                    |
+| `valueType`   | `"percent" \| "value"`                   | `"percent"` | Whether labels and data labels show percentages or raw values |
+| `roundValue`  | `boolean`                                | `false`     | Round displayed values to whole numbers                       |
+| `legendPos`   | `"top" \| "bottom" \| "right" \| "left"` | `"top"`     | Position of the legend                                        |
+| `legendAlign` | `"right" \| "left" \| "center"`          | `"right"`   | Horizontal alignment of the legend                            |
+| `newTabUrl`   | `string`                                 | `""`        | Makes the chart title a link that opens in a new tab          |
+
+> Note: Legend labels are truncated to 10 characters. The full label is shown in the tooltip on hover.
+
+##### ChartUtils props (shared across all chart components)
+
+| Name               | Type                                    | Default         | Description                                                                          |
+| ------------------ | --------------------------------------- | --------------- | ------------------------------------------------------------------------------------ |
+| `tool`             | `ReactElement`                          | —               | Icon or element rendered in the top-right of the chart header                        |
+| `dateRangeVisible` | `boolean`                               | `false`         | Shows a date range picker below the chart                                            |
+| `customDate`       | `RangeInterface`                        | —               | Initial date range for the picker                                                    |
+| `onChangeDate`     | `(customDate?: RangeInterface) => void` | —               | Called when the user applies a new date range                                        |
+| `colors`           | `string[]`                              | —               | Custom hex colour array for slices. Falls back to `localChartColors` in localStorage |
+| `darkMode`         | `boolean`                               | `false`         | Switches the chart to a dark theme                                                   |
+| `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode background                                        |
+| `enableGradient`   | `boolean`                               | `false`         | Fill slices with a gradient instead of solid colour                                  |
+| `chartOnly`        | `boolean`                               | `false`         | Renders only the chart canvas — no title, tool, or date range bar                    |
+| `chartSize`        | `number`                                | `280`           | Chart height in pixels                                                               |
+| `containerStyle`   | `string`                                | —               | Tailwind classes applied to the outer container                                      |
+| `minInterval`      | `number`                                | `60`            | Time picker interval in minutes (used in the date range modal)                       |
+
+##### RangeInterface
+
+| Name         | Type      | Description                                              |
+| ------------ | --------- | -------------------------------------------------------- |
+| `startDate`  | `Date`    | Start of the range                                       |
+| `endDate`    | `Date`    | End of the range                                         |
+| `isDuration` | `boolean` | `true` = date range, `false` = "beginning until endDate" |
+| `startTime`  | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |
+| `endTime`    | `string`  | Optional time string `"HH:mm:ss"` for same-day ranges    |

package/lib/components/chart/pieChart/pieChart.stories.tsx

@@ -0,0 +1,180 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { PieChart } from ".";
+import { StorySection } from "../../storyUtils";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const dummyData = [
+  { label: "Apple", value: 10 },
+  { label: "Mango", value: 20 },
+  { label: "Orange", value: 5 },
+  { label: "Watermelon", value: 15 },
+  { label: "Bananananananananananananan", value: 55 },
+];
+
+const series = dummyData.map((d) => d.value);
+const labels = dummyData.map((d) => d.label);
+
+stories.add("Pie Chart", () => {
+  const [seriesData, setSeriesData] = useState<number[]>([]);
+  const [labelData, setLabelData] = useState<string[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    const now = new Date();
+    const sevenDaysAgo = new Date();
+    const oneDaysAgo = new Date();
+    const twentyEightDaysAgo = new Date();
+    sevenDaysAgo.setDate(now.getDate() - 7);
+    oneDaysAgo.setDate(now.getDate() - 1);
+    twentyEightDaysAgo.setDate(now.getDate() - 28);
+    return [
+      { label: "Apple", value: 10, createdAt: sevenDaysAgo },
+      { label: "Mango", value: 20, createdAt: sevenDaysAgo },
+      { label: "Orange", value: 5, createdAt: oneDaysAgo },
+      { label: "Watermelon", value: 15, createdAt: oneDaysAgo },
+      {
+        label: "Bananananananananananananan",
+        value: 55,
+        createdAt: twentyEightDaysAgo,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      const s: number[] = [];
+      const l: string[] = [];
+      chartDummyData.forEach((d) => {
+        if (customDate?.isDuration) {
+          if (
+            d.createdAt >= customDate.startDate &&
+            d.createdAt <= customDate.endDate
+          ) {
+            s.push(d.value);
+            l.push(d.label);
+          }
+        } else {
+          s.push(d.value);
+          l.push(d.label);
+        }
+      });
+      setSeriesData(s);
+      setLabelData(l);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+    <>
+      <StorySection
+        title="Default (Donut)"
+        description="Default chart type is donut. Legend shows truncated labels (max 10 chars); tooltip shows the full label."
+      >
+        <div className="w-full">
+          <PieChart
+            title="Sales"
+            series={seriesData}
+            labels={labelData}
+            tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+            dateRangeVisible={true}
+            onChangeDate={handleSetData}
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Pie Type"
+        description='Pass type="pie" to render a filled pie chart instead of a donut.'
+      >
+        <div className="w-full">
+          <PieChart
+            title="Sales (Pie)"
+            series={series}
+            labels={labels}
+            type="pie"
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Value Display (valueType=value)"
+        description='By default labels show percentages. Pass valueType="value" to show raw numbers instead.'
+      >
+        <div className="w-full">
+          <PieChart
+            title="Sales by Value"
+            series={series}
+            labels={labels}
+            valueType="value"
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Legend Positions"
+        description='legendPos controls where the legend is rendered. legendAlign controls horizontal alignment. Defaults: legendPos="top", legendAlign="right".'
+      >
+        <div className="w-full">
+          <PieChart
+            title="Legend Bottom Center"
+            series={series}
+            labels={labels}
+            legendPos="bottom"
+            legendAlign="center"
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true and optionally darkModeBg to customise the background."
+        dark
+      >
+        <div className="w-full">
+          <PieChart
+            title="Sales"
+            series={series}
+            labels={labels}
+            tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+            darkMode={true}
+            darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Chart Only"
+        description="chartOnly=true removes the title, tool, and date range bar — renders just the chart canvas."
+      >
+        <div className="w-full">
+          <PieChart
+            title="Sales"
+            series={series}
+            labels={labels}
+            chartOnly={true}
+            chartSize={220}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/chart/polarAreaChart/README.md

@@ -0,0 +1,126 @@
+# Polar Area Chart
+
+<!-- STORY -->
+
+<hr>
+
+A polar area chart component for displaying data in a circular format. e.g: Performance metrics distribution
+
+##### Import
+
+```js
+import { PolarAreaChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [seriesData, setSeriesData] = useState<any[]>([]);
+
+const chartDummyData = useMemo(() => {
+  return [
+    {
+      label: "Series A",
+      value: 14,
+    },
+    {
+      label: "Series B",
+      value: 23,
+    },
+    {
+      label: "Series C",
+      value: 21,
+    },
+    {
+      label: "Series D",
+      value: 17,
+    },
+    {
+      label: "Series E",
+      value: 15,
+    },
+    {
+      label: "Series F",
+      value: 10,
+    },
+  ];
+}, []);
+
+const handleSetData = useCallback(
+  (customDate?: RangeInterface) => {
+    let dummySeriesData: any[] = [];
+    chartDummyData.map((eachData) => {
+      dummySeriesData.push({ x: eachData.label, y: eachData.value });
+      return null;
+    });
+    setSeriesData(dummySeriesData);
+  },
+  [chartDummyData]
+);
+
+useEffect(() => {
+  handleSetData();
+}, [handleSetData]);
+
+return (
+  <>
+    <div className="font-medium mb-5">Polar Area Chart</div>
+    <PolarAreaChart
+      title="Data Distribution"
+      seriesName="Values"
+      seriesData={seriesData}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      customDate={{
+        startDate: sevenDaysAgo,
+        endDate: moment().toDate(),
+        isDuration: true,
+      }}
+      onChangeDate={handleSetData}
+      showDataLabel={true}
+      newTabUrl="https://www.google.com/"
+    />
+    <div className="font-medium my-5">Dark Mode Polar Area Chart</div>
+    <PolarAreaChart
+      title="Performance Metrics"
+      seriesName="Metrics"
+      seriesData={seriesData}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      customDate={{
+        startDate: sevenDaysAgo,
+        endDate: moment().toDate(),
+        isDuration: true,
+      }}
+      onChangeDate={handleSetData}
+      showDataLabel={true}
+      darkMode={true}
+      darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+      borderColor=""
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description        |
+| ------- | -------- | ------------------ |
+| `title` | `string` | Title of the chart |
+
+##### Optional props
+
+| Name            | Type              | Default | Description                                  |
+| --------------- | ----------------- | ------- | -------------------------------------------- |
+| `seriesData`    | `PolarAreaData[]` | `[]`    | Series data with x(Name) and y(Number) value |
+| `seriesName`    | `string`          | ""      | Value name in pointer card                   |
+| `showToolbar`   | `boolean`         | `false` |                                              |
+| `showDataLabel` | `boolean`         | `true`  |                                              |
+| `newTabUrl`     | `string`          | ""      | set URL for create hyperlinks                |
+
+##### Polar Area Data props
+
+| Name | Type     | Description   |
+| ---- | -------- | ------------- |
+| `x`  | `string` | Name of data  |
+| `y`  | `number` | Value of data |

package/lib/components/chart/polarAreaChart/polarAreaChart.stories.tsx

@@ -0,0 +1,106 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { PolarAreaChart } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Polar Area Chart", () => {
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    return [
+      {
+        label: "Series A",
+        value: 14,
+      },
+      {
+        label: "Series B",
+        value: 23,
+      },
+      {
+        label: "Series C",
+        value: 21,
+      },
+      {
+        label: "Series D",
+        value: 17,
+      },
+      {
+        label: "Series E",
+        value: 15,
+      },
+      {
+        label: "Series F",
+        value: 10,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      let dummySeriesData: any[] = [];
+      chartDummyData.map((eachData) => {
+        dummySeriesData.push({ x: eachData.label, y: eachData.value });
+        return null;
+      });
+      setSeriesData(dummySeriesData);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+
+  return (
+    <>
+      <div className="font-medium mb-5">Polar Area Chart</div>
+      <PolarAreaChart
+        title="Data Distribution"
+        seriesName="Values"
+        seriesData={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        customDate={{
+          startDate: sevenDaysAgo,
+          endDate: moment().toDate(),
+          isDuration: true,
+        }}
+        onChangeDate={handleSetData}
+        showDataLabel={true}
+        newTabUrl="https://www.google.com/"
+      />
+      <div className="font-medium my-5">Dark Mode Polar Area Chart</div>
+      <PolarAreaChart
+        title="Performance Metrics"
+        seriesName="Metrics"
+        seriesData={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        customDate={{
+          startDate: sevenDaysAgo,
+          endDate: moment().toDate(),
+          isDuration: true,
+        }}
+        onChangeDate={handleSetData}
+        showDataLabel={true}
+        darkMode={true}
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+        borderColor=""
+      />
+    </>
+  );
+});