blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,57 @@
+# Radar Chart
+
+<!-- STORY -->
+
+<hr>
+
+A radar chart component for displaying analytics data in radar chart chart. e.g: Analytics of performance
+
+##### Import
+
+```js
+import { RadarChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+return (
+  <RadarChart
+    title={"Test Chart"}
+    darkMode={false}
+    data={[
+      {
+        name: "Seedlings",
+        data: [80, 50, 30, 40, 100, 20],
+      },
+      {
+        name: "Target",
+        data: [20, 30, 40, 80, 20, 80],
+      },
+    ]}
+    labels={["NTR", "SRR", "SBR", "CWR", "CER", "STR"]}
+    colors={[colors.neutral[400], "#f5222d"]}
+    showLegend
+    legendPosition="right"
+  />
+);
+```
+
+##### Required props
+
+| Name       | Type                               | Description        |
+| ---------- | ---------------------------------- | ------------------ |
+| `series`   | `{ name: string, data: number[] }` | Value of each data |
+| `labels`   | `string[]`                         | Name of each data  |
+| `title`    | `string`                           | Title of the chart |
+| `darkMode` | `boolean`                          | Dark mode          |
+
+##### Optional props
+
+| Name              | Type      | Default | Description                      |
+| ----------------- | --------- | ------- | -------------------------------- |
+| `fillOpacity`     | `number`  | ""      |                                  |
+| `legendPosition`  | `string`  | ""      | "top", "right", "bottom", "left" |
+| `showLegend`      | `boolean` | `false` | Show Legend                      |
+| `showDataLabels`  | `boolean` | `false` | Show Data Labels                 |
+| `showYaxisLabels` | `boolean` | `false` | Show Y Axis Labels               |

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

@@ -0,0 +1,36 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { RadarChart } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Radar Chart", () => {
+  return (
+    <RadarChart
+      title={"Test Chart"}
+      darkMode={true}
+      data={[
+        {
+          name: "Seedlings",
+          data: [80, 50, 30, 40, 100, 20],
+        },
+        {
+          name: "Target",
+          data: [20, 30, 40, 80, 20, 80],
+        },
+      ]}
+      labels={["NTR", "SRR", "SBR", "CWR", "CER", "STR"]}
+      showLegend
+      legendPosition="right"
+      dateRangeVisible
+      onChangeDate={() => {}}
+    />
+  );
+});

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

@@ -0,0 +1,152 @@
+# Radial Chart
+
+<!-- STORY -->
+
+<hr>
+
+A radial chart component for displaying analytics data in radial bar. e.g: Sales of the products
+
+##### Import
+
+```js
+import { RadialBar } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+ const [seriesData, setSeriesData] = useState<number[]>([]);
+  const [labelData, setLabelData] = useState<string[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    const customCurrentDate = new Date();
+    const twentyEightDaysAgo = new Date();
+    const sevenDaysAgo = new Date();
+    const oneDaysAgo = new Date();
+    sevenDaysAgo.setDate(customCurrentDate.getDate() - 7);
+    oneDaysAgo.setDate(customCurrentDate.getDate() - 1);
+    twentyEightDaysAgo.setDate(customCurrentDate.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: "Banana",
+        value: 55,
+        createdAt: twentyEightDaysAgo,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (startDate?: Date, endDate?: Date) => {
+      let dummySeriesData: number[] = [];
+      let dummyLabelData: string[] = [];
+
+      chartDummyData.map((eachData) => {
+        if (startDate && endDate) {
+          if (
+            eachData.createdAt >= startDate &&
+            eachData.createdAt <= endDate
+          ) {
+            dummySeriesData.push(eachData.value);
+            dummyLabelData.push(eachData.label);
+          }
+        } else {
+          dummySeriesData.push(eachData.value);
+          dummyLabelData.push(eachData.label);
+        }
+
+        return null;
+      });
+
+      setSeriesData(dummySeriesData);
+      setLabelData(dummyLabelData);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+   <div className="grid grid-col-1 md:grid-cols-2 gap-4">
+      <RadialBar
+        title="Sales"
+        description="Radial bar chart with dark mode"
+        labels={labelData}
+        series={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onChangeDate={handleSetData}
+        darkMode
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+      />
+      <RadialBar
+        title="Sales"
+        description="With custom bar colors"
+        labels={labelData}
+        series={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onChangeDate={handleSetData}
+        barColors={[
+          colors.pink[300],
+          colors.purple[300],
+          colors.indigo[300],
+          colors.lime[300],
+          colors.yellow[300],
+        ]}
+      />
+    </div>
+  );
+```
+
+##### Required props
+
+| Name     | Type       | Description               |
+| -------- | ---------- | ------------------------- |
+| `title`  | `string`   | Title of the chart        |
+| `labels` | `string[]` | Labels for the chart data |
+| `series` | `number[]` | Series data values        |
+
+##### Optional props
+
+| Name               | Type             | Default     | Description                            |
+| ------------------ | ---------------- | ----------- | -------------------------------------- |
+| `description`      | `string`         | `undefined` | Description below title                |
+| `showToolbar`      | `boolean`        | `false`     | Show toolbar controls                  |
+| `tool`             | `React Element`  | `undefined` | Custom tool element                    |
+| `chartSize`        | `number`         | `300`       | Height of the chart                    |
+| `containerStyle`   | `string`         | `undefined` | Additional CSS classes for container   |
+| `dateRangeVisible` | `boolean`        | `false`     | Show date range picker                 |
+| `customDate`       | `RangeInterface` | `undefined` | Custom date range                      |
+| `chartOnly`        | `boolean`        | `false`     | Show only the chart without container  |
+| `dataUnit`         | `string`         | `""`        | Unit for data values (e.g., "%", "px") |
+| `decimals`         | `number`         | `2`         | Number of decimal places to round to   |
+| `barColors`        | `string[]`       | `undefined` | Custom colors for the bars             |
+| `trackColors`      | `string[]`       | `undefined` | Custom colors for the track background |
+| `hollowPercent`    | `number`         | `undefined` | Percentage for hollow center (0-100)   |
+| `roundedStroke`    | `boolean`        | `false`     | Enable rounded ends on the bars        |
+| `onChangeDate`     | `function`       | `undefined` | Callback when date range changes       |
+| `darkMode`         | `boolean`        | `false`     | Enable dark mode styling               |
+| `darkModeBg`       | `string`         | `undefined` | Custom background color for dark mode  |

package/lib/components/chart/radialBar/radialChart.stories.tsx

@@ -0,0 +1,136 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { RadialBar } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+import colors from "tailwindcss/colors";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Radial Chart", () => {
+  const [seriesData, setSeriesData] = useState<number[]>([]);
+  const [labelData, setLabelData] = useState<string[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    const customCurrentDate = new Date();
+    const twentyEightDaysAgo = new Date();
+    const sevenDaysAgo = new Date();
+    const oneDaysAgo = new Date();
+    sevenDaysAgo.setDate(customCurrentDate.getDate() - 7);
+    oneDaysAgo.setDate(customCurrentDate.getDate() - 1);
+    twentyEightDaysAgo.setDate(customCurrentDate.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: "Banana",
+        value: 55,
+        createdAt: twentyEightDaysAgo,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      let dummySeriesData: number[] = [];
+      let dummyLabelData: string[] = [];
+
+      chartDummyData.map((eachData) => {
+        if (customDate?.isDuration) {
+          if (
+            eachData.createdAt >= customDate.startDate &&
+            eachData.createdAt <= customDate.endDate
+          ) {
+            dummySeriesData.push(eachData.value);
+            dummyLabelData.push(eachData.label);
+          }
+        } else {
+          if (customDate?.endDate && eachData.createdAt <= customDate.endDate) {
+            dummySeriesData.push(eachData.value);
+            dummyLabelData.push(eachData.label);
+          } else {
+            dummySeriesData.push(eachData.value);
+            dummyLabelData.push(eachData.label);
+          }
+        }
+
+        return null;
+      });
+
+      setSeriesData(dummySeriesData);
+      setLabelData(dummyLabelData);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+    <div className="grid grid-col-1 md:grid-cols-2 gap-4">
+      <RadialBar
+        title="Sales"
+        description="Radial bar chart with dark mode"
+        labels={labelData}
+        series={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onChangeDate={handleSetData}
+      />
+      <RadialBar
+        title="Sales"
+        description="Custom bar colors, track colors, hollow percentage"
+        labels={labelData}
+        series={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        onChangeDate={handleSetData}
+        hollowPercent={35}
+        barColors={[
+          colors.indigo[500],
+          colors.purple[500],
+          colors.fuchsia[500],
+          colors.pink[500],
+          colors.red[500],
+        ]}
+        roundedStroke
+        trackColors={[
+          colors.indigo[100],
+          colors.purple[100],
+          colors.fuchsia[100],
+          colors.pink[100],
+          colors.red[100],
+        ]}
+        // darkMode
+        // darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,323 @@
+# Range Bar Chart
+
+<!-- STORY -->
+
+<hr>
+
+A range bar chart (Gantt-style timeline chart) component for displaying time ranges. Perfect for showing schedules, timelines, or any data that spans between two time points. e.g: Project timelines, sleep schedules, activity schedules. The chart displays time on the X-axis and categories on the Y-axis, allowing the same category to appear multiple times with different time ranges.
+
+##### Import
+
+```js
+import { RangeBarChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+const sleepStart = new Date(today);
+sleepStart.setHours(23, 0, 0, 0);
+const sleepEnd = new Date(today);
+sleepEnd.setDate(today.getDate() + 1);
+sleepEnd.setHours(7, 0, 0, 0);
+
+const awakeStart = new Date(today);
+awakeStart.setHours(7, 0, 0, 0);
+const awakeEnd = new Date(today);
+awakeEnd.setHours(23, 0, 0, 0);
+
+return (
+  <RangeBarChart
+    title="Daily Sleep Schedule"
+    seriesName="Status"
+    data={[
+      {
+        category: "Sleep",
+        value: [sleepStart, sleepEnd],
+      },
+      {
+        category: "Awake",
+        value: [awakeStart, awakeEnd],
+      },
+    ]}
+    customColors={["#6366F1", "#10B981"]}
+    showDataLabel={false}
+  />
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description        |
+| ------- | -------- | ------------------ |
+| `title` | `string` | Title of the chart |
+
+##### Optional props
+
+| Name               | Type              | Default     | Description                                                                               |
+| ------------------ | ----------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `data`             | `RangeData[]`     | `[]`        | Array of range data with category and Date range value                                    |
+| `seriesName`       | `string`          | `"Range"`   | Series name displayed in tooltip                                                          |
+| `showToolbar`      | `boolean`         | `false`     | Show/hide chart toolbar                                                                   |
+| `showDataLabel`    | `boolean`         | `true`      | Show/hide data labels on bars                                                             |
+| `newTabUrl`        | `string`          | `""`        | Set URL for create hyperlinks                                                             |
+| `xAxisLabels`      | `AxisLabelConfig` | `undefined` | Customize X-axis labels (rotation, styling, formatting)                                   |
+| `yAxisLabels`      | `AxisLabelConfig` | `undefined` | Customize Y-axis labels (rotation, styling, formatting)                                   |
+| `xAxisTitle`       | `AxisTitleConfig` | `undefined` | Add and customize X-axis title                                                            |
+| `yAxisTitle`       | `AxisTitleConfig` | `undefined` | Add and customize Y-axis title                                                            |
+| `customBackground` | `string`          | `undefined` | Custom background color or gradient                                                       |
+| `customColors`     | `string[]`        | `undefined` | Custom color palette for bars (enables distributed mode)                                  |
+| `hideGrid`         | `boolean`         | `false`     | Hide chart grid lines                                                                     |
+| `hideAxes`         | `boolean`         | `false`     | Hide chart axes                                                                           |
+| `roundedBars`      | `boolean`         | `false`     | Apply rounded corners to bars                                                             |
+| `disableZoom`      | `boolean`         | `false`     | Disable chart zoom functionality                                                          |
+| `disableTooltip`   | `boolean`         | `false`     | Disable hover tooltips                                                                    |
+| `customAnimation`  | `AnimationConfig` | `undefined` | Custom animation settings                                                                 |
+| `onClick`          | `function`        | `undefined` | Callback function when a bar is clicked (receives category, startTimestamp, endTimestamp) |
+
+##### Range Data props
+
+| Name       | Type           | Description                                     |
+| ---------- | -------------- | ----------------------------------------------- |
+| `category` | `string`       | Category name (displayed on Y-axis, can repeat) |
+| `value`    | `[Date, Date]` | Time range as array `[startDate, endDate]`      |
+
+##### Animation Config props
+
+| Name      | Type      | Description               |
+| --------- | --------- | ------------------------- |
+| `enabled` | `boolean` | Enable/disable animations |
+| `easing`  | `string`  | Animation easing function |
+| `speed`   | `number`  | Animation duration in ms  |
+
+##### Label Customization Props
+
+| Name                    | Type                 | Description                                                     |
+| ----------------------- | -------------------- | --------------------------------------------------------------- |
+| `show`                  | `boolean`            | Show/hide labels                                                |
+| `rotate`                | `number`             | Rotation angle in degrees                                       |
+| `rotateAlways`          | `boolean`            | Always rotate labels                                            |
+| `hideOverlappingLabels` | `boolean`            | Hide overlapping labels                                         |
+| `trim`                  | `boolean`            | Trim long labels                                                |
+| `maxHeight`             | `number`             | Maximum height for labels                                       |
+| `style`                 | `AxisLabelStyle`     | CSS styling (fontSize, fontFamily, fontWeight, color, cssClass) |
+| `formatter`             | `AxisLabelFormatter` | Custom formatter function                                       |
+| `offsetX`               | `number`             | Horizontal offset                                               |
+| `offsetY`               | `number`             | Vertical offset                                                 |
+
+##### Advanced Examples
+
+```jsx
+// Activity schedule with multiple colors
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+<RangeBarChart
+  title="Activity Schedule"
+  seriesName="Activities"
+  data={[
+    {
+      category: "Sleep",
+      value: [
+        new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 0, 0),
+        new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 7, 0, 0),
+      ],
+    },
+    {
+      category: "Work",
+      value: [
+        new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0, 0),
+        new Date(today.getFullYear(), today.getMonth(), today.getDate(), 17, 0, 0),
+      ],
+    },
+    {
+      category: "Exercise",
+      value: [
+        new Date(today.getFullYear(), today.getMonth(), today.getDate(), 7, 0, 0),
+        new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0, 0),
+      ],
+    },
+  ]}
+  customColors={["#6366F1", "#10B981", "#F59E0B"]}
+/>
+
+// Project timeline with same category appearing multiple times
+<RangeBarChart
+  title="Project Timeline"
+  data={[
+    {
+      category: "Project A",
+      value: [
+        new Date(2024, 0, 1, 9, 0, 0),
+        new Date(2024, 0, 15, 17, 0, 0),
+      ],
+    },
+    {
+      category: "Project A",
+      value: [
+        new Date(2024, 1, 1, 9, 0, 0),
+        new Date(2024, 1, 10, 17, 0, 0),
+      ],
+    },
+    {
+      category: "Project B",
+      value: [
+        new Date(2024, 0, 16, 10, 0, 0),
+        new Date(2024, 0, 30, 16, 0, 0),
+      ],
+    },
+  ]}
+  customBackground="linear-gradient(180deg, #4A3AFF 0%, #6959FF 100%)"
+  customColors={["#FFFFFF", "#F5F3FF", "#E0E7FF"]}
+  roundedBars={true}
+  hideGrid={true}
+/>
+
+// Meeting schedule with click handler
+<RangeBarChart
+  title="Daily Meetings"
+  data={[
+    {
+      category: "Team Meeting",
+      value: [
+        new Date(2024, 0, 15, 9, 0, 0),
+        new Date(2024, 0, 15, 10, 0, 0),
+      ],
+    },
+    {
+      category: "Client Call",
+      value: [
+        new Date(2024, 0, 15, 14, 0, 0),
+        new Date(2024, 0, 15, 15, 30, 0),
+      ],
+    },
+  ]}
+  onClick={(category, startTimestamp, endTimestamp) => {
+    console.log(`${category}: ${new Date(startTimestamp).toLocaleString()} - ${new Date(endTimestamp).toLocaleString()}`);
+  }}
+/>
+
+// Disabled interactions for presentations
+<RangeBarChart
+  title="Static Timeline"
+  data={[
+    {
+      category: "Phase 1",
+      value: [
+        new Date(2024, 0, 1),
+        new Date(2024, 0, 15),
+      ],
+    },
+    {
+      category: "Phase 2",
+      value: [
+        new Date(2024, 0, 16),
+        new Date(2024, 0, 30),
+      ],
+    },
+  ]}
+  disableZoom={true}
+  disableTooltip={true}
+  showDataLabel={false}
+/>
+
+// Custom animation settings
+<RangeBarChart
+  title="Animated Timeline"
+  data={[
+    {
+      category: "Task A",
+      value: [
+        new Date(2024, 0, 1),
+        new Date(2024, 0, 10),
+      ],
+    },
+    {
+      category: "Task B",
+      value: [
+        new Date(2024, 0, 11),
+        new Date(2024, 0, 20),
+      ],
+    },
+  ]}
+  customAnimation={{
+    enabled: true,
+    easing: "easeout",
+    speed: 1200,
+  }}
+/>
+```
+
+##### Label Customization Examples
+
+```jsx
+// Custom X-axis (time) labels with formatting
+<RangeBarChart
+  title="Project Timeline"
+  data={[
+    {
+      category: "Project Alpha",
+      value: [
+        new Date(2024, 0, 1),
+        new Date(2024, 0, 15),
+      ],
+    },
+    {
+      category: "Project Beta",
+      value: [
+        new Date(2024, 0, 16),
+        new Date(2024, 0, 30),
+      ],
+    },
+  ]}
+  xAxisLabels={{
+    style: {
+      fontSize: "12px",
+      fontWeight: "bold",
+      color: "#374151",
+    },
+    formatter: (value) => {
+      const date = new Date(value);
+      return date.toLocaleDateString();
+    },
+  }}
+/>
+
+// Y-axis (categories) with custom styling
+<RangeBarChart
+  title="Activity Timeline"
+  data={[
+    {
+      category: "Morning Routine",
+      value: [
+        new Date(2024, 0, 1, 7, 0, 0),
+        new Date(2024, 0, 1, 9, 0, 0),
+      ],
+    },
+    {
+      category: "Work Session",
+      value: [
+        new Date(2024, 0, 1, 9, 0, 0),
+        new Date(2024, 0, 1, 17, 0, 0),
+      ],
+    },
+  ]}
+  yAxisLabels={{
+    style: {
+      fontSize: "11px",
+      color: "#059669",
+    },
+  }}
+  yAxisTitle={{
+    text: "Activities",
+    style: {
+      fontSize: "13px",
+      fontWeight: "bold",
+      color: "#1F2937",
+    },
+  }}
+/>
+```