blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,193 @@
+# Bar Chart
+
+<!-- STORY -->
+
+<hr>
+
+A bar chart for displaying categorical data. Supports horizontal/vertical orientation, stacked multi-series, distributed colours, custom annotations, and full visual customisation.
+
+##### Import
+
+```js
+import { BarChart } from "blixify-ui-web/chart/barChart";
+```
+
+##### Usage
+
+Single series (horizontal):
+
+```jsx
+<BarChart
+  title="Sales"
+  seriesName="Value"
+  seriesData={[
+    { x: "Apple", y: 10 },
+    { x: "Mango", y: 20 },
+  ]}
+  orientation="row"
+  distributed
+  dateRangeVisible={true}
+  customDate={{ startDate, endDate, isDuration: true }}
+  onChangeDate={handleSetData}
+/>
+```
+
+Stacked vertical:
+
+```jsx
+<BarChart
+  title="Sales by Company"
+  stackedBarSeries={[
+    { name: "Company A", data: [400, 430, 448] },
+    { name: "Company B", data: [430, 460, 478] },
+  ]}
+  categories={["Apple", "Mango", "Orange"]}
+  orientation="col"
+  stackedVertical={true}
+/>
+```
+
+Custom styled with annotation labels:
+
+```jsx
+<BarChart
+  title=""
+  categories={["May", "Jun", "Jul"]}
+  seriesData={[
+    { x: "May", y: 60 },
+    { x: "Jun", y: 65 },
+    { x: "Jul", y: 70 },
+  ]}
+  dataLabels={[
+    {
+      x: "May",
+      y: 60,
+      name: "RM 60.00",
+      offsetY: -25,
+      style: { color: "#fff", fontSize: "12px" },
+    },
+    {
+      x: "May",
+      y: 60,
+      name: "250 kWh",
+      offsetY: -10,
+      style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+    },
+  ]}
+  customBackground="linear-gradient(180deg, #4A3AFF 0%, #6959FF 100%)"
+  customColors={["#FFFFFF", "#F5F3FF", "#E0E7FF"]}
+  hideAxes={true}
+  hideGrid={true}
+  roundedBars={true}
+  disableZoom={true}
+  disableTooltip={true}
+/>
+```
+
+##### Required props
+
+| Name    | Type     | Description                                           |
+| ------- | -------- | ----------------------------------------------------- |
+| `title` | `string` | Title shown in the chart header. Pass `""` to hide it |
+
+##### Chart props
+
+| Name               | Type                                        | Default     | Description                                                     |
+| ------------------ | ------------------------------------------- | ----------- | --------------------------------------------------------------- |
+| `seriesData`       | `SeriesData[]`                              | `[]`        | Single-series data — array of `{ x: string, y: number }`        |
+| `seriesName`       | `string`                                    | `""`        | Tooltip label for single-series mode                            |
+| `seriesUnit`       | `string`                                    | `""`        | Unit appended to tooltip values (e.g. `"kg"`)                   |
+| `stackedBarSeries` | `SeriesItem[]`                              | `[]`        | Multi-series data. Use with `categories` and `stackedVertical`  |
+| `categories`       | `string[]`                                  | `[]`        | X-axis (or Y-axis for horizontal) category labels               |
+| `orientation`      | `"row" \| "col"`                            | `"col"`     | `"row"` = horizontal bars, `"col"` = vertical bars              |
+| `stackedVertical`  | `boolean`                                   | `false`     | Stack series on top of each other (requires `stackedBarSeries`) |
+| `distributed`      | `boolean`                                   | `false`     | Give each bar in a single series a distinct colour              |
+| `showDataLabel`    | `boolean`                                   | `true`      | Show value labels on bars                                       |
+| `showToolbar`      | `boolean`                                   | `false`     | Show the ApexCharts toolbar                                     |
+| `borderColor`      | `string`                                    | `"#e7e7e7"` | Grid line colour. Pass `""` to remove grid lines                |
+| `newTabUrl`        | `string`                                    | `""`        | Makes the chart title a link that opens in a new tab            |
+| `onClick`          | `(category: string, value: string) => void` | —           | Called when a bar is clicked                                    |
+
+##### Visual customisation props
+
+| Name               | Type              | Default | Description                                                  |
+| ------------------ | ----------------- | ------- | ------------------------------------------------------------ |
+| `customBackground` | `string`          | —       | CSS background value (colour or gradient) for the chart area |
+| `customColors`     | `string[]`        | —       | Colour palette for bars. Overrides `colors` from ChartUtils  |
+| `hideGrid`         | `boolean`         | `false` | Hide chart grid lines                                        |
+| `hideAxes`         | `boolean`         | `false` | Hide both axes (labels, borders, ticks)                      |
+| `roundedBars`      | `boolean`         | `false` | Apply rounded corners to bar tops                            |
+| `disableZoom`      | `boolean`         | `false` | Disable zoom interaction                                     |
+| `disableTooltip`   | `boolean`         | `false` | Disable hover tooltips                                       |
+| `customAnimation`  | `AnimationConfig` | —       | Override default animation settings                          |
+| `xAxisLabels`      | `AxisLabelConfig` | —       | Customise X-axis label rotation, style, and formatter        |
+| `yAxisLabels`      | `AxisLabelConfig` | —       | Customise Y-axis label rotation, style, and formatter        |
+| `xAxisTitle`       | `AxisTitleConfig` | —       | Add a title below the X-axis                                 |
+| `yAxisTitle`       | `AxisTitleConfig` | —       | Add a title beside the Y-axis                                |
+| `dataLabels`       | `DataLabel[]`     | `[]`    | Annotation labels positioned above specific bars             |
+
+##### ChartUtils props (shared across all chart components)
+
+| Name               | Type                                    | Default         | Description                                                             |
+| ------------------ | --------------------------------------- | --------------- | ----------------------------------------------------------------------- |
+| `tool`             | `ReactElement`                          | —               | Icon or element 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[]`                              | —               | Series colour palette. Falls back to `localChartColors` in localStorage |
+| `darkMode`         | `boolean`                               | `false`         | Switches to dark theme                                                  |
+| `darkModeBg`       | `string`                                | `"bg-gray-900"` | Tailwind classes for the dark mode background                           |
+| `enableGradient`   | `boolean`                               | `false`         | Fill bars with a gradient                                               |
+| `chartOnly`        | `boolean`                               | `false`         | Render only the 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                                         |
+
+##### SeriesData
+
+| Name | Type     | Description      |
+| ---- | -------- | ---------------- |
+| `x`  | `string` | Category / label |
+| `y`  | `number` | Bar value        |
+
+##### SeriesItem (stacked)
+
+| Name   | Type       | Description                           |
+| ------ | ---------- | ------------------------------------- |
+| `name` | `string`   | Series name shown in the legend       |
+| `data` | `number[]` | Values aligned to `categories`        |
+| `unit` | `string`   | Unit appended to this series' tooltip |
+
+##### DataLabel
+
+| Name      | Type     | Description                                                      |
+| --------- | -------- | ---------------------------------------------------------------- |
+| `x`       | `string` | Category to anchor the label to                                  |
+| `y`       | `number` | Y value to anchor the label to                                   |
+| `name`    | `string` | Label text                                                       |
+| `offsetY` | `number` | Vertical offset from the anchor point (negative = above the bar) |
+| `offsetX` | `number` | Horizontal offset                                                |
+| `style`   | `object` | `{ color, fontSize, fontWeight, background, border }`            |
+
+##### AnimationConfig
+
+| Name      | Type      | Description                        |
+| --------- | --------- | ---------------------------------- |
+| `enabled` | `boolean` | Enable or disable animation        |
+| `easing`  | `string`  | Easing function (e.g. `"easeout"`) |
+| `speed`   | `number`  | Duration in milliseconds           |
+
+##### AxisLabelConfig
+
+| Name                    | Type                        | Description                                   |
+| ----------------------- | --------------------------- | --------------------------------------------- |
+| `show`                  | `boolean`                   | Show or hide labels                           |
+| `rotate`                | `number`                    | Rotation angle in degrees                     |
+| `rotateAlways`          | `boolean`                   | Always rotate regardless of available space   |
+| `hideOverlappingLabels` | `boolean`                   | Hide labels that overlap                      |
+| `trim`                  | `boolean`                   | Trim long labels                              |
+| `maxHeight`             | `number`                    | Max height for label area                     |
+| `style`                 | `object`                    | `{ fontSize, fontFamily, fontWeight, color }` |
+| `formatter`             | `(value, index?) => string` | Custom label formatter                        |
+| `offsetX`               | `number`                    | Horizontal offset                             |
+| `offsetY`               | `number`                    | Vertical offset                               |

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

@@ -0,0 +1,318 @@
+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 { BarChart } 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 stackedSeries = [
+  { name: "Company A", data: [400, 430, 448] },
+  { name: "Company B", data: [430, 460, 478] },
+  { name: "Company C", data: [448, 470, 490] },
+];
+
+const rawData = [
+  { label: "Apple", value: 10, daysAgo: 7 },
+  { label: "Mango", value: 20, daysAgo: 7 },
+  { label: "Orange", value: 5, daysAgo: 1 },
+  { label: "Watermelon", value: 15, daysAgo: 1 },
+  { label: "Banana", value: 55, daysAgo: 28 },
+];
+
+stories.add("Bar Chart", () => {
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    const today = new Date();
+    return rawData.map((d) => {
+      const date = new Date();
+      date.setDate(today.getDate() - d.daysAgo);
+      return { label: d.label, value: d.value, createdAt: date };
+    });
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      const points = chartDummyData
+        .filter((d) => {
+          if (!customDate) return true;
+          if (customDate.isDuration)
+            return (
+              d.createdAt >= customDate.startDate &&
+              d.createdAt <= customDate.endDate
+            );
+          return customDate.endDate ? d.createdAt <= customDate.endDate : true;
+        })
+        .map((d) => ({ x: d.label, y: d.value }));
+      setSeriesData(points);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+
+  const defaultDateRange: RangeInterface = {
+    startDate: sevenDaysAgo,
+    endDate: moment().toDate(),
+    isDuration: true,
+  };
+
+  return (
+    <div className="font-sans max-w-3xl p-6">
+      <StorySection
+        title="Horizontal Bar Chart"
+        description={
+          <>
+            Single series using <code>seriesData</code>. Set{" "}
+            <code>orientation="row"</code> for horizontal bars. Use{" "}
+            <code>distributed=&#123;true&#125;</code> to give each bar a
+            distinct colour. Pass <code>newTabUrl</code> to make the title a
+            link.
+          </>
+        }
+      >
+        <BarChart
+          title="Sales"
+          seriesName="Value"
+          seriesData={seriesData}
+          orientation="row"
+          distributed
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+          newTabUrl="https://www.google.com/"
+        />
+      </StorySection>
+
+      <StorySection
+        title="Stacked Vertical Bar Chart"
+        description={
+          <>
+            Use <code>stackedBarSeries</code> with <code>categories</code> for
+            multi-series. Set <code>stackedVertical=&#123;true&#125;</code> to
+            stack the bars. <code>orientation="col"</code> renders vertical bars
+            (default).
+          </>
+        }
+      >
+        <BarChart
+          title="Sales by Company"
+          stackedBarSeries={stackedSeries}
+          orientation="col"
+          categories={["Apple Sales", "Mango Sales", "Orange Sales"]}
+          tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+          stackedVertical={true}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode with Gradient"
+        description={
+          <>
+            Set <code>darkMode=&#123;true&#125;</code> and{" "}
+            <code>darkModeBg</code> for a dark theme.{" "}
+            <code>enableGradient</code> fills bars with a gradient.{" "}
+            <code>borderColor=""</code> removes grid lines.
+          </>
+        }
+        dark
+      >
+        <BarChart
+          title="Sales by Company"
+          stackedBarSeries={stackedSeries}
+          orientation="col"
+          categories={["Apple Sales", "Mango Sales", "Orange Sales"]}
+          tool={<PencilIcon className="h-4 w-4 text-white" />}
+          dateRangeVisible={true}
+          customDate={defaultDateRange}
+          onChangeDate={handleSetData}
+          showDataLabel={false}
+          stackedVertical={true}
+          darkMode={true}
+          darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+          borderColor=""
+          enableGradient={true}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Custom Styled with dataLabels"
+        description={
+          <>
+            Use <code>customBackground</code> and <code>customColors</code> for
+            full visual control. <code>dataLabels</code> renders annotation
+            labels above bars with custom text, offset, and style — useful for
+            showing two lines of info per bar (e.g. price + unit).{" "}
+            <code>hideAxes</code>, <code>hideGrid</code>, and{" "}
+            <code>roundedBars</code> clean up the presentation.
+          </>
+        }
+      >
+        <div className="overflow-x-auto w-full">
+          <div className="min-w-[600px]">
+            <BarChart
+              title=""
+              containerStyle="bg-gradient-to-b from-[#4a3aff] to-[#6959ff] rounded-2xl p-6 shadow-lg"
+              categories={["May", "Jun", "Jul", "Aug", "Sep", "Oct"]}
+              seriesData={[
+                { x: "May", y: 60 },
+                { x: "Jun", y: 65 },
+                { x: "Jul", y: 70 },
+                { x: "Aug", y: 55 },
+                { x: "Sep", y: 58 },
+                { x: "Oct", y: 72.85 },
+              ]}
+              dataLabels={[
+                {
+                  x: "May",
+                  y: 60,
+                  name: "RM 60.00",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "May",
+                  y: 60,
+                  name: "250 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+                {
+                  x: "Jun",
+                  y: 65,
+                  name: "RM 65.00",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "Jun",
+                  y: 65,
+                  name: "260 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+                {
+                  x: "Jul",
+                  y: 70,
+                  name: "RM 70.00",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "Jul",
+                  y: 70,
+                  name: "280 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+                {
+                  x: "Aug",
+                  y: 55,
+                  name: "RM 55.00",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "Aug",
+                  y: 55,
+                  name: "230 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+                {
+                  x: "Sep",
+                  y: 58,
+                  name: "RM 58.00",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "Sep",
+                  y: 58,
+                  name: "240 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+                {
+                  x: "Oct",
+                  y: 72.85,
+                  name: "RM 72.85",
+                  offsetY: -25,
+                  style: {
+                    color: "#fff",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                  },
+                },
+                {
+                  x: "Oct",
+                  y: 72.85,
+                  name: "302 kWh",
+                  offsetY: -10,
+                  style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" },
+                },
+              ]}
+              customBackground="linear-gradient(180deg, #4A3AFF 0%, #6959FF 100%)"
+              customColors={[
+                "#FFFFFF",
+                "#F5F3FF",
+                "#E0E7FF",
+                "#C7D2FE",
+                "#A5B4FC",
+                "#818CF8",
+              ]}
+              hideAxes={true}
+              hideGrid={true}
+              roundedBars={true}
+              showDataLabel={false}
+              disableZoom={true}
+              disableTooltip={true}
+              customAnimation={{ enabled: true, easing: "easeout", speed: 800 }}
+            />
+          </div>
+        </div>
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,124 @@
+# Box Plot Chart
+
+<!-- STORY -->
+
+<hr>
+
+A box plot chart component for displaying statistical data distribution. e.g: Performance metrics across different quarters
+
+##### Import
+
+```js
+import { BoxPlotChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [seriesData, setSeriesData] = useState<any[]>([]);
+
+const chartDummyData = useMemo(() => {
+  return [
+    {
+      label: "Q1",
+      data: [760, 801, 848, 895, 965],
+    },
+    {
+      label: "Q2",
+      data: [733, 853, 939, 980, 1080],
+    },
+    {
+      label: "Q3",
+      data: [714, 762, 817, 870, 918],
+    },
+    {
+      label: "Q4",
+      data: [733, 812, 848, 881, 950],
+    },
+    {
+      label: "Q5",
+      data: [800, 844, 897, 928, 1000],
+    },
+  ];
+}, []);
+
+const handleSetData = useCallback(
+  (customDate?: RangeInterface) => {
+    let dummySeriesData: any[] = [];
+    chartDummyData.map((eachData) => {
+      dummySeriesData.push({ x: eachData.label, y: eachData.data });
+      return null;
+    });
+    setSeriesData(dummySeriesData);
+  },
+  [chartDummyData]
+);
+
+useEffect(() => {
+  handleSetData();
+}, [handleSetData]);
+
+return (
+  <>
+    <div className="font-medium mb-5">Box Plot Chart</div>
+    <BoxPlotChart
+      title="Electric Generation Performance"
+      seriesName="Journey Performance"
+      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={false}
+      newTabUrl="https://www.google.com/"
+    />
+    <div className="font-medium my-5">Dark Mode Box Plot Chart</div>
+    <BoxPlotChart
+      title="Performance Distribution"
+      seriesName="Data Distribution"
+      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={false}
+      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`    | `BoxPlotData[]` | `[]`                  | Series data with x(Name) and y(Number array) |
+| `seriesName`    | `string`        | "Journey Performance" | Value name in pointer card                   |
+| `xaxisTitle`    | `string`        | undefined             | Title for the X-axis                         |
+| `yaxisTitle`    | `string`        | undefined             | Title for the Y-axis                         |
+| `showToolbar`   | `boolean`       | `false`               |                                              |
+| `showDataLabel` | `boolean`       | `false`               |                                              |
+| `newTabUrl`     | `string`        | ""                    | set URL for create hyperlinks                |
+
+##### Box Plot Data props
+
+| Name | Type       | Description                    |
+| ---- | ---------- | ------------------------------ |
+| `x`  | `string`   | Name of data category          |
+| `y`  | `number[]` | Array of values for statistics |