apxor-bi-widgets

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

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

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

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;
  };
}

License

NA

Contributing

NA

Support

NA