apxor-bi-widgets
v0.0.2
Published
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.
Downloads
132
Maintainers
Readme
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 withkey
andvalue
propertiestitle
: String for the chart titleshowDataLabels
: Boolean to show/hide data labelsshowDataValues
: Boolean to show/hide data valuesshowlegends
: Boolean to show/hide legendsunit
: 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 stringsidentifiers
: Array of identifier stringsfilterProperties
: Array of filter property objectsfilterPropertieOperators
: Function that accepting operators based on the property type (string | float | int | datetime | date)filterPropertieValues
: Function that accepting values based on the selected propertyunits
: Array of unit stringsonViewChart
: Function called when viewing a chart, returns a payload with all filled fieldsonSaveOrUpdateChart
: Function called when saving or updating a chart, returns a payload with all filled fieldsdashboardRedirectionOptions
: 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