Business Intelligence Widgets

This project demonstrates the use of the apxor-bi-widgets package, which includes pre-built components for creating and rendering business intelligence visualizations. The sample app shows how to integrate and utilize these components effectively.

Installation

To install apxor-bi-widgets, use npm:

npm install apxor-bi-widgets

# or
yarn add apxor-bi-widgets

# or
pnpm add apxor-bi-widgets

Components

1. Bar Graph

• BarGraph
• BarGraphCreation
• Usage
• Payload Structure

2. Stacked Bar Graph

• StackedBarGraph
• StackedBarGraphCreation
• Usage
• Payload Structure

3. Aggregates

• Aggregates
• AggregatesCreation
• Usage
• Payload Structure

4. Line/Area Graph

• LineGraph
• LineGraphCreation
• Usage
• Payload Structure

5. Pie Chart

• PieChart
• PieChartCreation
• Usage
• Payload Structure

6. Table

• Table
• TableCreation
• Usage
• Payload Structure

7. Advanced Pie Chart

• PieChart
• AdvancedPieChartCreation
• Usage
• Payload Structure

BarGraph

The BarGraph component renders a bar graph based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• title: String for the chart title

Optional Props:

• [xAxisLabel]: String representing X axis label
• [yAxisLabel]: String representing Y axis label
• [showXAxisKeys]: Boolean to show/hide X axis keys
• [showYAxisValues]: Boolean to show/hide Y axis values
• [xAxisUnit]: String representing the unit of measurement for X axis
• [yAxisUnit]: String representing the unit of measurement for Y axis
• [showlegends]: Boolean to show/hide legends
• [chartContainerStyles]: Object for custom chart container styles
• [colorScheme="ColorsForStackedBar"]: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar"
• [height]: Number for chart height
• [width]: Number for chart width
• [legendSymbol]: "circle" | "rectangle"
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [loading]:Loading state if data is loading

BarGraphCreation

The BarGraphCreation component provides an interface for creating and customizing bar graph.

Props

Required Props:

• xAxisProperties: Array of strings for X axis properties
• yAxisProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• xAxisUnits: Array of unit strings for X axis
• yAxisUnits: Array of unit strings for Y axis
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

BarGraph & BarGraphCreation Usage

Here's a basic example of how to use the BarGraph and BarGraphCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  BarGraph,
  BarGraphCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
  { key: "Computer", value: 15 },
  { key: "Tab", value: 10 },
  { key: "Mobile", value: 20 },
  { key: "Phone", value: 25 },
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <BarGraph
          data={data}
          title="Sample Bar Graph"
          height={600}
          width={600}
          colorScheme="ColorsForStackedBar"
          legendSymbol="circle"
          showXAxisKeys={true}
          showYAxisValues={true}
          xAxisLabel="Days"
          xAxisUnit="day"
          yAxisUnit="sec"
          yAxisLabel="Time"
        />
        <BarGraphCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
            filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}


          xAxisProperties={["dimension1", "dimension2"]}
          yAxisProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          xAxisUnits={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
          yAxisUnits={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of BarGraphCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
        name: string;
        xAxisProperty: string;
        aliasForXAxis: string;
        aliasForYAxis: string;
        yAxisProperties: {
            formula: string;
            events: {
                [key: string]: {
                    name: string;
                    data_type:  "string" | "float" | "int" | "datetime" | "date" | string;
                };
             };
        };
    };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];

  customization: {
        colorScheme: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar";
        xAxisUnit: string | null;
        yAxisUnit: string | null;
        showXAxisKeys: boolean;
        showYAxisValues: boolean;
        showlegends: boolean;
        dashboardRedirectionUrl: string | null;
    };
}

StackedBarGraph

The StackedBarGraph component renders a stacked bar graph based on the provided data.

Props

Required Props:

• data: Array of { key: string; [category: string]: string | number; }
• title: String for the chart title

Optional Props:

• [xAxisLabel]: String representing X axis label
• [yAxisLabel]: String representing Y axis label
• [showXAxisKeys]: Boolean to show/hide X axis keys
• [showYAxisValues]: Boolean to show/hide Y axis values
• [yAxisUnit]: String representing the unit of measurement for Y axis
• [showlegends]: Boolean to show/hide legends
• [chartContainerStyles]: Object for custom chart container styles
• [colorScheme="ColorsForStackedBar"]: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar"
• [height]: Number for chart height
• [width]: Number for chart width
• [legendSymbol]: "circle" | "rectangle"
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [loading]:Loading state if data is loading

StackedBarGraphCreation

The StackedBarGraphCreation component provides an interface for creating and customizing stacked bar graph.

Props

Required Props:

• xAxisProperties: Array of { attribute: string; type: DATA_TYPE; }
• yAxisProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• xAxisUnits: Array of unit strings for X axis
• yAxisUnits: Array of unit strings for Y axis
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection
• finalTransformationOptions:Array of { label: string; value: string; }

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

StackedBarGraph & StackedBarGraphCreation Usage

Here's a basic example of how to use the StackedBarGraph and StackedBarGraphCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  StackedBarGraph,
  StackedBarGraphCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
   { key: "January", desktop: 186, mobile: 80 },
   { key: "February", desktop: 305, mobile: 200 },
   { key: "March", desktop: 237, mobile: 120 },
   { key: "April", desktop: 73, mobile: 190 },
   { key: "May", desktop: 209, mobile: 130 },
   { key: "June", desktop: 214, mobile: 140 },
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <StackedBarGraph
          data={data}
          title="Sample Stacked Bar Graph"
          height={600}
          width={600}
          colorScheme="ColorsForStackedBar"
          legendSymbol="circle"
          showXAxisKeys={true}
          showYAxisValues={true}
          xAxisLabel="Days"
          xAxisUnit="day"
          yAxisUnit="sec"
          yAxisLabel="Time"
        />
        <StackedBarGraphCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}


          xAxisProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}
          yAxisProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          finalTransformationOptions={[
              {
                label: "Seconds To Timestamp",
                value: "secondsToTimestamp",
              },
              {
                label: "Minutes To Timestamp",
                value: "minutesToTimestamp",
              },
              {
                label: "In Days",
                value: "toWeekDay",
              },
            ]}
          xAxisUnits={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
          yAxisUnits={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of StackedBarGraphCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
        name: string;
        xAxisProperty: string;
        aliasForXAxis: string;
        xAxisDataType: string;
        yAxisDimensions: {
                        alias: string;
                        final_transformation: string;
                        formula: string;
                        events: {
                            [key: string]: {
                                name: string;
                                data_type: "string" | "float" | "int" | "datetime" | "date" | string;
                            };
                        };
                        dimention?: string;
                        dimention_type: "derived" | "normal";
                       }[];
  };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];

  customization: {
        colorScheme: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar";
        xAxisUnit: string | null;
        yAxisUnit: string | null;
        showXAxisKeys: boolean;
        showYAxisValues: boolean;
        showlegends: boolean;
        dashboardRedirectionUrl: string | null;
    };
}

Aggregates

The Aggregates component renders a aggregates list based on the provided data.

Props

Required Props:

• type: single | grouped -Type of aggregates
• title: String for the chart title
• data: if type is single then data willl be { label: string; value: number; unit?: string; } else Array of { label: string; value: number; unit?: string; }

Optional Props:

• [colorForLabel]: Color for label
• [colorForValue]: Color for value
• [colorForUnit]: Color for unit
• [fontSizeForLabel]: Font size for label
• [fontSizeForValue]: Font size for value
• [fontSizeForUnit]: Font size for unit
• [backgroundColor]: if type is single
• [chartContainerStyles]: Object for custom chart container styles
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [loading]:Loading state if data is loading

AggregatesCreation

The AggregatesCreation component provides an interface for creating and customizing aggregates.

Props

Required Props:

• aggregatesProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• units: Array of unit strings for X axis
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection
• finalTransformationOptions: Array of { label: string; value: string; }

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

Aggregates & AggregatesCreation Usage

Here's a basic example of how to use the Aggregates and AggregatesCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  Aggregates,
  AggregatesCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
             {
                label: "Call Count",
                value: 2000,
                unit: "sec",
              }, {
                label: "Call Duration",
                value: 10,
                unit: "min",
              },
              ];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <Aggregates
          data={data}
          title="Sample Aggregates"
          type="grouped"
          colorForLabel="#000000"
          colorForValue="#000000"
          colorForUnit="#000000"
          fontSizeForLabel={14}
          fontSizeForValue={18}
          fontSizeForUnit={10}
        />
        <AggregatesCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}

          aggregatesProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          finalTransformationOptions={[
              {
                label: "Seconds To Timestamp",
                value: "secondsToTimestamp",
              },
              {
                label: "Minutes To Timestamp",
                value: "minutesToTimestamp",
              },
              {
                label: "In Days",
                value: "toWeekDay",
              },
            ]}
          units={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}

        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of AggregatesCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
       name?: string;
       aggregateType: "grouped" | "single";
       aggregates: {
                  alias: string;
                  final_transformation: string;
                  formula: string;
                  events: {
                      [key: string]: {
                          name: string;
                          data_type: "string" | "float" | "int" | "datetime" | "date" | string;
                      };
                  };
                  filters: {
                      name: string;
                      operator: OPERATOR;
                      data_type: "string" | "float" | "int" | "datetime" | "date" | string;
                      value: string[];
                  }[];
                  unit: string;
       }[];
  };

  customization: {
        colorForLabel: string;
        fontSizeForLabel: number;
        colorForValue: string;
        fontSizeForValue: number;
        colorForUnit: string;
        fontSizeForUnit: number;
        backgroundColor?: string | null;
        dashboardRedirectionUrl: string | null;
    };
}

LineGraph

The LineGraph component renders a line/area graph based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties. if granularity=day then key must be a date
• title: String for the chart title
• chartType: Type of chart. either line or area
• granularity: Granularity. day or hour
• aliasOfMetric: Alias of metric
• valueType: "average" | "min" | "max" | "median" | "sum" | "start" | "end"

Optional Props:

• [colorForValue]: Color for value
• [fontSizeForValue]: Font size for value
• [colorForUnit]:Color for unit
• [fontSizeForUnit]: Font size for unit
• [unit]: String representing the unit of measurement for value
• [enableXAxisLabels]: Boolean to show/hide X axis labels
• [enableYAxisLabels]: Boolean to show/hide Y axis labels
• [chartContainerStyles]: Object for custom chart container styles
• [color]: "SkyBlue" | "Charcoal" | "LightGreen" | "Peach" | "Lavender" | "Pink" | "Gold" | "Teal" | "Coral" | "Aqua"
• [height]: Number for chart height
• [width]: Number for chart width
• [legendSymbol]: "circle" | "rectangle"
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [loading]:Loading state if data is loading

LineGraphCreation

The LineGraphCreation component provides an interface for creating and customizing line graph.

Props

Required Props:

• metricProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• units: Array of unit strings for X axis
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

LineGraph & LineGraphCreation Usage

Here's a basic example of how to use the LineGraph and LineGraphCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  LineGraph,
  LineGraphCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
  { key: "15", value: 15 },
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "25", value: 25 },
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <LineGraph
          data={data}
          height={300}
          width={600}
          chartType="area"
          granularity="hour"
          aliasOfMetric="Count"
          valueType="average"
          title="Sample Line Graph"
          enableYAxisLabels
          enableXAxisLabels
          unit="k"
          fontSizeForValue={50}
          colorForValue="red"
        />
        <LineGraphCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
            filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}


          metricProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          units={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of LineGraphCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
   visualization: {
        name: string;
        aliasForMetric: string;
        metrics:{
            formula: string;
            events: {
               [key: string]: {
                   name: string;
                   data_type: DATA_TYPE | string;
               };
          };
       };
       granularity: "hour" | "day";
    };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];

  customization: {
        color: `"SkyBlue" | "Charcoal" | "LightGreen" | "Peach" | "Lavender" | "Pink" | "Gold" | "Teal" | "Coral" | "Aqua"`;
        chartType: "area" | "line";
        lineValueType: LINE_VALUE_TYPE;
        unit: string | null;
        colorForValue?: string;
        fontSizeForValue?: number;
        colorForUnit?: string;
        fontSizeForUnit?: number;
        enableXAxisLabels: boolean;
        enableYAxisLabels: boolean;
        dashboardRedirectionUrl: string | null;
    };
}

PieChart

The PieChart component renders a pie chart based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• title: String for the chart title
• showDataLabels: Boolean to show/hide data labels
• showDataValues: Boolean to show/hide data values
• showlegends: Boolean to show/hide legends
• unit: String representing the unit of measurement

Optional Props:

• [chartContainerStyles]: Object for custom chart container styles
• [chartType="pieChart"]: "pieChart" | "donutChart"
• [colorScheme="ColorsForStackedBar"]: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar"
• [height]: Number for chart height
• [legendSymbol]: "circle" | "rectangle"
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [width]: Number for chart width
• [loading]:Loading state if data is loading

PieChartCreation

The PieChartCreation component provides an interface for creating and customizing pie charts.

Props

Required Props:

• dimensions: Array of dimension strings
• identifiers: Array of identifier strings
• filterProperties: Array of filter property objects
• filterPropertieOperators: Function that accepting operators based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values based on the selected property
• units: Array of unit strings
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of redirection options

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading

PieChart & PieChartCreation Usage

Here's a basic example of how to use the PieChart and PieChartCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  PieChart,
  PieChartCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data for PieChart
const data = [
  { key: "Computer", value: 15 },
  { key: "Tab", value: 10 },
  { key: "Mobile", value: 20 },
  { key: "Phone", value: 25 },
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <PieChart
          data={data}
          title="Sample Pie Chart"
          showDataLabels
          showDataValues
          showlegends
          unit="min"
          chartType="pieChart"
          colorScheme="ColorsForStackedBar"
          height={300}
          width={330}
          legendSymbol="circle"
        />
        <PieChartCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // Implement your logic here
            return [];
          }}
          dimensions={["dimension1", "dimension2"]}
          identifiers={["identifier1", "identifier2"]}
          filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of string based on property
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}
          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          units={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of PieChartCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
    name: string;
    identifier: string;
    dimension: string;
  };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];
  customization: {
    colorScheme: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar";
    chartType: "pieChart" | "donutChart";
    unit: string | null;
    showDataValues: boolean;
    showDataLabels: boolean;
    showlegends: boolean;
    dashboardRedirectionUrl: string | null;
  };
}

Table

The Table component renders a table widget based on the provided data.

Props

Required Props:

• data: Array of any key & value pair
• title: String for the chart title

Optional Props:

• [chartContainerStyles]: Object for custom chart container styles
• [height]: Number for chart height
• [width]: Number for chart width
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [loading]:Loading state if data is loading

TableCreation

The TableCreation component provides an interface for creating and customizing Table widget.

Props

Required Props:

• dimensionProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection
• finalTransformationOptions:Array of { label: string; value: string; }

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

Table & TableCreation Usage

Here's a basic example of how to use the Table and TableCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  Table,
  TableCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
   { Customer: "preprod",Logins: "191",},
   { Customer: "ozoneca10", Logins: "83",},
   { Customer: "RokoSubuser", Logins: "4",},
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
        <Table
          data={data}
          title="Sample Table Widget"
        />
        <TableCreation
          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}

          dimensionProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          finalTransformationOptions={[
              {
                label: "Seconds To Timestamp",
                value: "secondsToTimestamp",
              },
              {
                label: "Minutes To Timestamp",
                value: "minutesToTimestamp",
              },
              {
                label: "In Days",
                value: "toWeekDay",
              },
            ]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of TableCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
    name: string;
    dimensions: {
               alias: string;
               final_transformation: string;
               formula: string;
               events: {
                 [key: string]: {
                   name: string;
                   data_type:  "string" | "float" | "int" | "datetime" | "date" | string;
                 };
               };
               dimention?: string;
               dimentionDataType?:  "string" | "float" | "int" | "datetime" | "date" | string;
               dimention_type: "derived" | "normal";
               }[];
  };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];

  customization: {
        dashboardRedirectionUrl: string | null;
    };
}

Advanced PieChart

The PieChart component renders a pie chart based on the provided data.

Props

Required Props:

• data: Array of objects with key and value properties
• title: String for the chart title
• showDataLabels: Boolean to show/hide data labels
• showDataValues: Boolean to show/hide data values
• showlegends: Boolean to show/hide legends
• unit: String representing the unit of measurement

Optional Props:

• [chartContainerStyles]: Object for custom chart container styles
• [chartType="pieChart"]: "pieChart" | "donutChart"
• [colorScheme="ColorsForStackedBar"]: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar"
• [height]: Number for chart height
• [legendSymbol]: "circle" | "rectangle"
• [rootStyles]: Object for custom root styles
• [titleStyles]: Object for custom title styles
• [width]: Number for chart width
• [loading]:Loading state if data is loading

AdvancedPieChartCreation

The AdvancedPieChartCreation component provides an interface for creating and customizing advanced pie chart.

Props

Required Props:

• identifierProperties: Array of { attribute: string; type: DATA_TYPE; }
• dimensionProperties: Array of { attribute: string; type: DATA_TYPE; }
• filterProperties: Array of filter property of { label: string; value: string; }
• filterPropertieOperators: Function that accepting operators of { label: string; value: string; } based on the property type (string | float | int | datetime | date)
• filterPropertieValues: Function that accepting values of { label: string; value: string; } based on the selected property
• units: Array of unit strings for X axis
• onViewChart: Function called when viewing a chart, returns a payload with all filled fields
• onSaveOrUpdateChart: Function called when saving or updating a chart, returns a payload with all filled fields
• dashboardRedirectionOptions: Array of { label: string; value: string; } redirection

Optional Props:

• [rootStyles]: Object for custom root styles
• [isUpdate]: Boolean key
• [updateProps]: Object of all necessary fields for updating
• [isViewChartLoading]:Loading state if view chart data is loading
• [expressionFormulaError]: String of error for expression builder

PieChart & AdvancedPieChartCreation Usage

Here's a basic example of how to use the PieChart and AdvancedPieChartCreation components from apxor-bi-widgets:

import {
  ColorsSchemeForGraph,
  DATA_TYPE,
  OPERATOR,
  PieChart,
  AdvancedPieChartCreation,
} from "apxor-bi-widgets";
import { useState } from "react";

// Sample data
const data = [
  { key: "15", value: 15 },
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "25", value: 25 },
];

function App() {
  const [previewData, setPreviewData] = useState([]);
  const [saveData, setSaveData] = useState([]);

  return (
    <div>
      <h1>Business Intelligence Widgets Demo</h1>
      <div>
         <PieChart
          data={data}
          title="Sample Pie Chart"
          showDataLabels
          showDataValues
          showlegends
          unit="min"
          chartType="pieChart"
          colorScheme="ColorsForStackedBar"
          height={300}
          width={330}
          legendSymbol="circle"
        />
        <AdvancedPieChartCreation
          identifierProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}
          dimensionProperties={[
             { attribute: "CreatedTimeStamp", type: "string"},
             { attribute: "Source",type: "string"}
          ]}

          filterPropertieOperators={(type: DATA_TYPE) => {
            // it will return selected property data type and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
            filterPropertieValues={(property: string) => {
            // it will return selected property and it is accepting array of
            //     {
            //     label: string;
            //     value: string;
            //     }
            // Implement your logic here
            return [];
          }}
          filterProperties={[
            { name: "property1", type: "string" },
            { name: "property2", type: "int" },
          ]}

          dashboardRedirectionOptions={[
            { label: "Dashboard 1", value: "/dashboard1" },
            { label: "Dashboard 2", value: "/dashboard2" },
          ]}
          onViewChart={(payload) => {
            setPreviewData(payload);
          }}
          onSaveOrUpdateChart={(payload) => {
            setSaveData(payload);
          }}
          units={["min", "sec", "ms", "hour", "day", "week", "month", "year"]}
        />
      </div>
    </div>
  );
}

export default App;

Payload Structure of AdvancedPieChartCreation

The payload structure you will get after clicking on onViewChart, onSaveOrUpdateChart, and updateProps will accept the same format is as follows:

{
  visualization: {
        name: string;
        identifies: {
              alias?: string;
              formula: string;
              events: {
                  [key: string]: {
                      name: string;
                      data_type:"string" | "float" | "int" | "datetime" | "date" | string;
                  };
              };
             };
        dimensions: {
              alias?: string;
              formula: string;
              events: {
                  [key: string]: {
                      name: string;
                      data_type:"string" | "float" | "int" | "datetime" | "date" | string;
                  };
              };
             };
    };
  customFilters: {
    name: string;
    operator:  "EQ" | "NEQ" | "LT" | "LTE" | "GT" | "GTE" | "R";
    data_type: "string" | "float" | "int" | "datetime" | "date" | string;
    value: string[];
  }[];

 customization: {
    colorScheme: "SequentialRose" | "SequentialBlue" | "SequentialGreen" | "SequentialOrange" | "SequentialGray" | "DivergingGreenWhite" | "DivergingDarkGreenYellow" | "rainbowOf10" | "rainbowOf5" | "orangeShadeOf10" | "Random20" | "DivergingDarkPurpleBlueRed" | "ColorsForStackedBar";
    chartType: "pieChart" | "donutChart";
    unit: string | null;
    showDataValues: boolean;
    showDataLabels: boolean;
    showlegends: boolean;
    dashboardRedirectionUrl: string | null;
  };
}

License

This project is licensed under the MIT License.