blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,104 @@
+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 { BoxPlotChart } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Box Plot Chart", () => {
+  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]);
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+
+  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/"
+        yaxisTitle="Electric Generation (kWh)"
+        xaxisTitle="Quarters"
+      />
+      <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=""
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,166 @@
+# Bubble Chart
+
+<!-- STORY -->
+
+<hr>
+
+A bubble chart component for displaying three-dimensional data. e.g: Page views vs time spent with bubble size representing engagement
+
+##### Import
+
+```js
+import { BubbleChart } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [seriesData, setSeriesData] = useState<any[]>([]);
+
+const chartDummyData = useMemo(() => {
+  return [
+    {
+      x: 95,
+      y: 95,
+      z: 13.8,
+      name: "AN",
+    },
+    {
+      x: 86.5,
+      y: 102.9,
+      z: 14.7,
+      name: "BE",
+    },
+    {
+      x: 80.8,
+      y: 91.5,
+      z: 15.8,
+      name: "CZ",
+    },
+    {
+      x: 80.4,
+      y: 102.5,
+      z: 12,
+      name: "DK",
+    },
+    {
+      x: 80.3,
+      y: 86.1,
+      z: 11.8,
+      name: "FI",
+    },
+    {
+      x: 78.4,
+      y: 70.1,
+      z: 16.6,
+      name: "FR",
+    },
+    {
+      x: 74.2,
+      y: 68.5,
+      z: 14.5,
+      name: "DE",
+    },
+    {
+      x: 73.5,
+      y: 83.1,
+      z: 10,
+      name: "GR",
+    },
+    {
+      x: 71,
+      y: 93.2,
+      z: 24.7,
+      name: "HU",
+    },
+    {
+      x: 69.8,
+      y: 57.6,
+      z: 10.4,
+      name: "IS",
+    },
+  ];
+}, []);
+
+const handleSetData = useCallback(
+  (customDate?: RangeInterface) => {
+    let dummySeriesData: any[] = [];
+    chartDummyData.map((eachData) => {
+      dummySeriesData.push(eachData);
+      return null;
+    });
+    setSeriesData(dummySeriesData);
+  },
+  [chartDummyData]
+);
+
+useEffect(() => {
+  handleSetData();
+}, [handleSetData]);
+
+return (
+  <>
+    <div className="font-medium mb-5">Bubble Chart</div>
+    <BubbleChart
+      title="Page Views vs Time Spent"
+      seriesName="Pages"
+      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 Bubble Chart</div>
+    <BubbleChart
+      title="Analytics Overview"
+      seriesName="Data Points"
+      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`    | `BubbleData[]` | `[]`      | Series data with x, y, z coordinates and name |
+| `seriesName`    | `string`       | "Pages"   | 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                 |
+
+##### Bubble Data props
+
+| Name   | Type     | Description                      |
+| ------ | -------- | -------------------------------- |
+| `x`    | `number` | X-axis value (Time Spent)        |
+| `y`    | `number` | Y-axis value (Page Views)        |
+| `z`    | `number` | Bubble size (Engagement)         |
+| `name` | `string` | Optional name for the data point |

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

@@ -0,0 +1,144 @@
+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 { BubbleChart } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Bubble Chart", () => {
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    return [
+      {
+        x: 95,
+        y: 95,
+        z: 13.8,
+        name: "AN",
+      },
+      {
+        x: 86.5,
+        y: 102.9,
+        z: 14.7,
+        name: "BE",
+      },
+      {
+        x: 80.8,
+        y: 91.5,
+        z: 15.8,
+        name: "CZ",
+      },
+      {
+        x: 80.4,
+        y: 102.5,
+        z: 12,
+        name: "DK",
+      },
+      {
+        x: 80.3,
+        y: 86.1,
+        z: 11.8,
+        name: "FI",
+      },
+      {
+        x: 78.4,
+        y: 70.1,
+        z: 16.6,
+        name: "FR",
+      },
+      {
+        x: 74.2,
+        y: 68.5,
+        z: 14.5,
+        name: "DE",
+      },
+      {
+        x: 73.5,
+        y: 83.1,
+        z: 10,
+        name: "GR",
+      },
+      {
+        x: 71,
+        y: 93.2,
+        z: 24.7,
+        name: "HU",
+      },
+      {
+        x: 69.8,
+        y: 57.6,
+        z: 10.4,
+        name: "IS",
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      let dummySeriesData: any[] = [];
+      chartDummyData.map((eachData) => {
+        dummySeriesData.push(eachData);
+        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">Bubble Chart</div>
+      <BubbleChart
+        title="Page Views vs Time Spent"
+        seriesName="Pages"
+        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/"
+        xaxisTitle="Value A"
+        yaxisTitle="Value B"
+      />
+      <div className="font-medium my-5">Dark Mode Bubble Chart</div>
+      <BubbleChart
+        title="Analytics Overview"
+        seriesName="Data Points"
+        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=""
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,107 @@
+# Card
+
+<!-- STORY -->
+
+<hr>
+
+A card component for displaying analytics data. e.g: Total.
+
+##### Import
+
+```js
+import { Card } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [countData, setCountData] = useState < number > 0;
+
+const stats = 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 [
+    {
+      stats: 71897,
+      createdAt: sevenDaysAgo,
+    },
+    {
+      stats: 230,
+      createdAt: oneDaysAgo,
+    },
+    {
+      stats: 2010,
+      createdAt: twentyEightDaysAgo,
+    },
+  ];
+}, []);
+
+const handleSetData = useCallback(
+  (startDate?: Date, endDate?: Date) => {
+    let dummySeriesData: number = 0;
+    stats.map((eachData) => {
+      if (startDate && endDate) {
+        if (eachData.createdAt >= startDate && eachData.createdAt <= endDate) {
+          dummySeriesData += eachData.stats;
+        }
+      } else {
+        dummySeriesData += eachData.stats;
+      }
+
+      return null;
+    });
+
+    setCountData(dummySeriesData);
+  },
+  [stats]
+);
+
+useEffect(() => {
+  handleSetData();
+}, [handleSetData]);
+
+return (
+  <Card
+    icon={<UserGroupIcon className="h-5 w-5 text-white" />}
+    title="Completed Tasks"
+    description="Total Tasks(s)"
+    count={countData}
+    tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+    dateRangeVisible={true}
+    onChangeDate={handleSetData}
+  />
+);
+```
+
+##### Required props
+
+| Name    | Type            | Description         |
+| ------- | --------------- | ------------------- |
+| `icon`  | `React Element` | Icon                |
+| `title` | `string`        | Title               |
+| `count` | `number`        | Content of the card |
+
+##### Optional props
+
+| Name                 | Type              | Default | Description                   |
+| -------------------- | ----------------- | ------- | ----------------------------- |
+| `iconBgColor`        | `Tailwind Class`  | ""      |                               |
+| `tool`               | `React Element`   | ""      |                               |
+| `iconTop`            | `boolean`         | `false` | set the icon on top of title  |
+| `iconClassName`      | `string`          | `false` | set the icon size small       |
+| `unit`               | `string`          | ""      | set the unit of value         |
+| `subContent`         | `React Element`   | ""      |                               |
+| `containerClassName` | `string`          | ""      | set the className of the card |
+| `dateRangeVisible`   | `boolean`         | `false` |                               |
+| `hideDesc`           | `boolean`         | `false` |                               |
+| `textTruncate`       | `boolean`         | `false` |                               |
+| `customDate`         | `Range Interface` |         |                               |
+| `onChangeDate`       | `function`        |         | Handle Change Chart Data      |
+| `description`        | `string`          |         | Description of the card       |
+| `newTabUrl`          | `string`          | ""      | set URL for create hyperlinks |

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

@@ -0,0 +1,89 @@
+import { PencilIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Card } from ".";
+import { RangeInterface } from "../DateRange";
+import README from "./README.md";
+
+const stories = storiesOf("Chart", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Card", () => {
+  const [countData, setCountData] = useState<number>(0);
+
+  const stats = 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 [
+      {
+        stats: 71897,
+        createdAt: sevenDaysAgo,
+      },
+      {
+        stats: 230,
+        createdAt: oneDaysAgo,
+      },
+      {
+        stats: 2010,
+        createdAt: twentyEightDaysAgo,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      let dummySeriesData: number = 0;
+      stats.map((eachData) => {
+        if (customDate?.isDuration) {
+          if (
+            eachData.createdAt >= customDate.startDate &&
+            eachData.createdAt <= customDate.endDate
+          ) {
+            dummySeriesData += eachData.stats;
+          }
+        } else {
+          if (customDate?.endDate && eachData.createdAt <= customDate.endDate) {
+            dummySeriesData += eachData.stats;
+          } else {
+            dummySeriesData += eachData.stats;
+          }
+        }
+
+        return null;
+      });
+
+      setCountData(dummySeriesData);
+    },
+    [stats]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  return (
+    <Card
+      icon={<UserGroupIcon className="h-5 w-5 text-white" />}
+      title="Completed Tasks"
+      description="Total Tasks(s)"
+      count={countData}
+      tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+      dateRangeVisible={true}
+      onChangeDate={handleSetData}
+      textTruncate={true}
+      darkMode={false}
+      darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+    />
+  );
+});