oolib 2.54.0 → 2.54.2

package/dist/components/dataViz/comps/BarChart/index.d.ts

@@ -0,0 +1 @@
+export function BarChart(props: any): any;

package/dist/components/dataViz/comps/BarChart/index.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = void 0;
+var react_1 = __importStar(require("react"));
+var d3Modules_1 = __importDefault(require("../../../../d3Modules"));
+var utils_1 = require("../../utils");
+var testJSON_1 = require("../../../../utils/testJSON");
+var getVal_1 = require("../../../../utils/getterSetterDeleter/getVal");
+var themes_1 = require("../../../../themes");
+var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var BarChart = function (props) {
+    var config = {
+        width: 550,
+        height: 100,
+        margin: { top: 50, right: 50, bottom: 50, left: 100 },
+    };
+    var theme = (0, styled_components_1.useTheme)();
+    var width = props.width || config.width;
+    var height = props.height || config.height;
+    var marginProp = (0, testJSON_1.testJSON)(props.margin)
+        ? JSON.parse(props.margin)
+        : undefined;
+    var margin = marginProp
+        ? {
+            top: marginProp.top || config.margin.top,
+            bottom: marginProp.bottom || config.margin.bottom,
+            left: marginProp.left || config.margin.left,
+            right: marginProp.right || config.margin.right,
+        }
+        : config.margin;
+    var data = props.data, id = props.id, className = props.className, numValuePath = props.numValuePath, categoryValuePath = props.categoryValuePath, _a = props.categoryAxis, categoryAxis = _a === void 0 ? 'y' : _a, _b = props.barWidth, barWidth = _b === void 0 ? 20 : _b, numberAxisLabel = props.numberAxisLabel, _c = props.highlight
+    /**
+     * can be 'max' or 'min' or undefined. if undefined,
+     * all bars will be painted the same color. if defined,
+     * only the max/min will be painted a color.
+     * rest of bars will be grey
+     */
+    , highlight = _c === void 0 ? 'max' : _c
+    /**
+     * can be 'max' or 'min' or undefined. if undefined,
+     * all bars will be painted the same color. if defined,
+     * only the max/min will be painted a color.
+     * rest of bars will be grey
+     */
+    ;
+    var wrapperId = "OKE_PiChart".concat(id ? "_" + id : "");
+    var wrapperClass = "OKE-PiChart ".concat(className || "");
+    (0, react_1.useEffect)(function () { return drawChart(data); }, [data]);
+    var drawChart = function (data) {
+        // console.log({DATA : data})
+        //first clear the div
+        d3Modules_1.default.select("#" + wrapperId + ">svg").remove();
+        //then draw
+        var svg = (0, utils_1.genResponsiveSvgCanvas)({
+            width: width,
+            height: height,
+            wrapperId: wrapperId,
+            margin: margin,
+            translate: "".concat(margin.left, ",").concat(margin.right)
+        });
+        // X axis
+        var categoryAxisGenerator = d3Modules_1.default
+            .scaleBand()
+            //   .range([0, width]) alt
+            .range([0, height])
+            .domain(data.map(function (d) {
+            return (0, getVal_1.getVal)(d, categoryValuePath);
+        }))
+            .padding(0.2);
+        var categoryAxis = svg
+            .append("g")
+            //.attr("transform", "translate(0," + height + ")") //alt
+            .attr("transform", "translate(0, 0)")
+            //.call(d3.axisBottom(categoryAxis)) //alt
+            .call(d3Modules_1.default.axisLeft(categoryAxisGenerator));
+        categoryAxis.selectAll("text")
+            //   .attr("transform", "translate(-5,0)")
+            .style("text-anchor", "end")
+            .attr("color", themes_1.colors.greyColor100);
+        categoryAxis.select('.domain').remove();
+        categoryAxis.selectAll('.tick line').remove();
+        // Add Y axis
+        var numbersAxisGenerator = d3Modules_1.default
+            .scaleLinear()
+            .domain([0, (0, utils_1.getMax)({ data: data, valuePath: numValuePath })])
+            //   .range([height, 0]) // alt
+            .range([0, width]);
+        var numberAxisG = svg.append("g");
+        var numberAxis = numberAxisG
+            //.attr("transform", "translate(0, 0)") alt
+            .attr("transform", "translate(0," + height + ")") //alt
+            //.call(d3.axisLeft(numbersAxis)); //alt
+            .call(d3Modules_1.default.axisBottom(numbersAxisGenerator));
+        numberAxis.select('.domain').attr('stroke', themes_1.colors.greyColor40);
+        numberAxis.selectAll('.tick text').attr('color', themes_1.colors.greyColor70);
+        numberAxis.selectAll('.tick line').attr('stroke', themes_1.colors.greyColor40);
+        if (numberAxisLabel) {
+            svg.append('text')
+                .text(numberAxisLabel)
+                .attr("x", 0)
+                .attr("y", height + 35)
+                .attr('fill', themes_1.colors.greyColor100);
+        }
+        // Bars
+        svg
+            .selectAll("mybar")
+            .data(data)
+            .enter()
+            .append("rect")
+            //   .attr("x", function (d) {
+            //     return categoryAxis(getVal(d, categoryValuePath)) + 10;
+            //   }) //alt
+            .attr("y", function (d) {
+            return categoryAxisGenerator((0, getVal_1.getVal)(d, categoryValuePath)) + (categoryAxisGenerator.bandwidth() / 2) - (barWidth / 2);
+        })
+            //   .attr("y", function (d) {
+            //     return numbersAxis(getVal(d, numValuePath));
+            //   }) //alt
+            .attr("x", 0)
+            //.attr("width", barWidth) //alt
+            .attr("height", barWidth)
+            //   .attr("height", function (d) {
+            //     return height - numbersAxis(getVal(d, numValuePath));
+            //   }) //alt
+            .attr("width", function (d) {
+            return numbersAxisGenerator((0, getVal_1.getVal)(d, numValuePath));
+        })
+            .attr('rx', 5)
+            .attr("transform", 'translateX(50%)')
+            .attr("fill", function (d) {
+            return !highlight
+                ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+                : highlight === 'max'
+                    ? (0, utils_1.getMax)({ data: data, valuePath: numValuePath }) === (0, getVal_1.getVal)(d, numValuePath)
+                        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+                        : themes_1.colors.greyColor15
+                    : (0, utils_1.getMin)({ data: data, valuePath: numValuePath }) === (0, getVal_1.getVal)(d, numValuePath)
+                        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+                        : themes_1.colors.greyColor15;
+        });
+        //Bar Number Labels
+        svg
+            .selectAll("barnumlabels")
+            .data(data)
+            .enter()
+            .append("text")
+            .text(function (d) { return (0, getVal_1.getVal)(d, numValuePath); })
+            .attr("y", function (d) {
+            return categoryAxisGenerator((0, getVal_1.getVal)(d, categoryValuePath)) + (categoryAxisGenerator.bandwidth() / 2) + 4;
+        })
+            .attr("x", function (d) {
+            return numbersAxisGenerator((0, getVal_1.getVal)(d, numValuePath)) + 5;
+        });
+    };
+    return react_1.default.createElement("div", { id: wrapperId, className: wrapperClass });
+};
+exports.BarChart = BarChart;

package/dist/components/dataViz/utils/index.d.ts

@@ -0,0 +1,24 @@
+export function genResponsiveSvgCanvas({ margin, width, height, wrapperId, translate }: {
+    margin: any;
+    width: any;
+    height: any;
+    wrapperId: any;
+    translate: any;
+}): any;
+export function getMinMax({ data, valuePath }: {
+    data: any;
+    valuePath: any;
+}): number[];
+export function getMax({ data, valuePath }: {
+    data: any;
+    valuePath: any;
+}): number;
+export function getMin({ data, valuePath }: {
+    data: any;
+    valuePath: any;
+}): number;
+export function calcSvgElemScaleFactor({ setWidth, actualWidth, setValueToScale, }: {
+    setWidth: any;
+    actualWidth: any;
+    setValueToScale: any;
+}): number;

package/dist/components/dataViz/utils/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcSvgElemScaleFactor = exports.getMin = exports.getMax = exports.getMinMax = exports.genResponsiveSvgCanvas = void 0;
+var d3Modules_1 = __importDefault(require("../../../d3Modules"));
+var getVal_1 = require("../../../utils/getterSetterDeleter/getVal");
+var genResponsiveSvgCanvas = function (_a) {
+    var margin = _a.margin, width = _a.width, height = _a.height, wrapperId = _a.wrapperId, translate = _a.translate;
+    return d3Modules_1.default
+        .select("#" + wrapperId)
+        .append("svg")
+        // Responsive SVG needs these 2 attributes and no width and height attr.
+        .attr("preserveAspectRatio", "xMinYMin meet")
+        .attr("viewBox", "0 0 ".concat(width + margin.left + margin.right, " ").concat(height + margin.top + margin.bottom))
+        .append("g")
+        .classed("vizCanvas", true)
+        .attr("transform", "translate(".concat(translate || "".concat(width / 2, ",").concat(height / 2), ")"))
+        .attr("font-family", "'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu','noto_sans_te', 'noto_sans_kn', 'noto_sans_or', sans-serif");
+};
+exports.genResponsiveSvgCanvas = genResponsiveSvgCanvas;
+var getOnlyNumbersAry = function (_a) {
+    var data = _a.data, valuePath = _a.valuePath;
+    return data.map(function (d) { return parseInt((0, getVal_1.getVal)(d, valuePath)); });
+};
+var getMinMax = function (_a) {
+    var data = _a.data, valuePath = _a.valuePath;
+    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
+    return [Math.min.apply(Math, onlyNumbers), Math.max.apply(Math, onlyNumbers)];
+};
+exports.getMinMax = getMinMax;
+var getMax = function (_a) {
+    var data = _a.data, valuePath = _a.valuePath;
+    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
+    return Math.max.apply(Math, onlyNumbers);
+};
+exports.getMax = getMax;
+var getMin = function (_a) {
+    var data = _a.data, valuePath = _a.valuePath;
+    var onlyNumbers = getOnlyNumbersAry({ data: data, valuePath: valuePath });
+    return Math.min.apply(Math, onlyNumbers);
+};
+exports.getMin = getMin;
+var calcSvgElemScaleFactor = function (_a) {
+    var setWidth = _a.setWidth, actualWidth = _a.actualWidth, setValueToScale = _a.setValueToScale;
+    var scaleFactor = actualWidth / setWidth;
+    return setValueToScale * (1 / scaleFactor);
+};
+exports.calcSvgElemScaleFactor = calcSvgElemScaleFactor;

package/dist/d3Modules/index.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    export { line };
+    export { area };
+    export { scaleLinear };
+    export { scaleTime };
+    export { scaleBand };
+    export { select };
+    export { selectAll };
+    export { format };
+    export { pie };
+    export { arc };
+    export { curveMonotoneX };
+    export { timeParse };
+    export { extent };
+    export { min };
+    export { max };
+    export { bisector };
+    export { mouse };
+    export { axisBottom };
+    export { axisLeft };
+    export { axisRight };
+    export { axisTop };
+    export { geoMercator };
+    export { geoPath };
+    export { transition };
+    export { scaleOrdinal };
+    export { entries };
+}
+export default _default;

package/dist/d3Modules/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var d3_shape_1 = require("d3-shape");
+var d3_scale_1 = require("d3-scale");
+var d3_axis_1 = require("d3-axis");
+var d3_time_format_1 = require("d3-time-format");
+/**
+ * @note
+ * mouse is deprecated d3 6 onnwards. read : https://observablehq.com/@d3/d3v6-migration-guide#pointer
+ */
+var d3_collection_1 = require("d3-collection");
+var d3_selection_1 = require("d3-selection");
+var d3_transition_1 = require("d3-transition");
+var d3_array_1 = require("d3-array");
+var d3_format_1 = require("d3-format");
+var d3_geo_1 = require("d3-geo");
+exports.default = {
+    line: d3_shape_1.line,
+    area: d3_shape_1.area,
+    scaleLinear: d3_scale_1.scaleLinear,
+    scaleTime: d3_scale_1.scaleTime,
+    scaleBand: d3_scale_1.scaleBand,
+    select: d3_selection_1.select,
+    selectAll: d3_selection_1.selectAll,
+    format: d3_format_1.format,
+    pie: d3_shape_1.pie,
+    arc: d3_shape_1.arc,
+    curveMonotoneX: d3_shape_1.curveMonotoneX,
+    timeParse: d3_time_format_1.timeParse,
+    extent: d3_array_1.extent,
+    min: d3_array_1.min,
+    max: d3_array_1.max,
+    bisector: d3_array_1.bisector,
+    mouse: d3_selection_1.mouse,
+    get event() { return d3_selection_1.event; },
+    axisBottom: d3_axis_1.axisBottom,
+    axisLeft: d3_axis_1.axisLeft,
+    axisRight: d3_axis_1.axisRight,
+    axisTop: d3_axis_1.axisTop,
+    geoMercator: d3_geo_1.geoMercator,
+    geoPath: d3_geo_1.geoPath,
+    transition: d3_transition_1.transition,
+    scaleOrdinal: d3_scale_1.scaleOrdinal,
+    entries: d3_collection_1.entries
+};

package/dist/index.d.ts

@@ -35,5 +35,6 @@ export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as DateRangePicker } from "./components/DateRangePicker";
+export { BarChart } from "./components/dataViz/comps/BarChart";
 export { HintsProvider } from "./components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsProvider = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -83,6 +83,8 @@ var DatePicker_1 = require("./components/DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
 var DateRangePicker_1 = require("./components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return __importDefault(DateRangePicker_1).default; } });
+var BarChart_1 = require("./components/dataViz/comps/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 //// context
 var contextApi_1 = require("./components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.54.0",
+  "version": "2.54.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",