impaktapps-design 0.0.1

package/dist/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Roboto;600&display=swap";.container{margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "impaktapps-design",
+  "version": "0.0.1",
+  "dependencies": {
+    "@babel/core": "^7.16.12",
+    "@visx/visx": "^3.1.2",
+    "@vitejs/plugin-react": "^1.1.4",
+    "babel-loader": "^8.2.3",
+    "latest-version": "^7.0.0",
+    "react-d3-speedometer": "^1.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^2.1.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.act21.io/lovely/incentivo/-/tree/Grapho_In_Development"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "license": "MIT",
+  "author": "Satendra Raghav",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@types/node": "^17.0.12",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.5.5",
+    "@types/jest": "^27.5.2",
+    "vite": "^2.7.13",
+    "vite-plugin-dts": "^0.9.9"
+  },
+  "main": "./dist/impaktapps-design.umd.js",
+  "module": "./dist/impaktapps-design.es.js",
+  "types": "./dist/impaktapps-design.d.ts",
+  "description": "This is Act21 product powered by ImpaktApps, this is mainly develop to provide different ready to use UI components."
+}

package/src/component/BarGraph/BarGraph.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import DrawBarGraph from "./DrawBarGraph";
+import { ParentSize } from "@visx/responsive";
+import { finalDataProvider } from "../../utils/finalDataProvider";
+
+const BarGraph = ({ value }:any) => {
+  const barData:any = finalDataProvider("BarGraph",value)
+  let GraphRender = (
+    <ParentSize>
+      {(parent) => (
+        <DrawBarGraph
+          parentWidth={parent.width}
+          parentHeight={barData?.style?.containerStyle?.height}
+          margin= {{ top: barData?.style?.labelStyle?.margin?.top||10, right: barData?.style?.labelStyle?.margin?.right||10,bottom:  barData?.style?.labelStyle?.margin?.bottom||20 ,left: barData?.style?.labelStyle?.margin?.left||60 }}
+          value={barData}
+          parentRef={parent.ref}
+          resizeParent={parent.resize}
+        />
+      )}
+    </ParentSize>
+  );
+
+  return <div style={barData?.style?.containerStyle}>
+    {barData?.main?.header && <div style={{ fontWeight: 500,
+      textAlign: "left",
+      fontFamily: "inherit",
+      marginBottom:"20px",
+      padding: "15px 0 1px 20px",
+      fontSize: "18px",
+      color: "#121926",...barData?.style?.headerStyle}}>{barData?.main?.header}</div> }
+    {GraphRender}
+  </div>;
+};
+export default BarGraph;

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Group } from "@visx/group";
+import { Bar } from "@visx/shape";
+import { scaleLinear, scaleBand } from "@visx/scale";
+import { defaultStyles,useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import { localPoint } from "@visx/event";
+import ToolTip from "../ToolTip";
+import BottomAxis from "../BottomAxis";
+import LeftAxis from "../LeftAxis";
+
+const DrawBarGraph = ({
+  value,
+  parentWidth,
+  parentHeight,
+margin
+}: any) => {
+  const data:any[] = value?.main?.data;
+  const arr =
+    value.main?.xAxisValue && value.main?.yAxisValue
+      ? [value.cosntent.xAxisValue, value.main?.yAxisValue]
+      : Object.keys(data[0]);
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  }: any = useTooltip();
+  const { containerRef } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+  const handleMouse = (event: any, datum: any) => {
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: [datum[arr[0]], datum[arr[1]]],
+    });
+  };
+  const xMax:number = parentWidth - margin.left - margin.right;;
+  const yMax:number = parentHeight - margin.top - margin.bottom;
+  const x = (d: any) => d[arr[0]];
+  const y = (d: any) => +d[arr[1]];
+  const xScale = scaleBand({
+    range: [0, xMax],
+    round: true,
+    domain: data.map(x),
+    padding: 0.4,
+  });
+  const tempValue = data.reduce((total: any, curValue: any) => {
+    return total + curValue[arr[1]];
+  }, 0);
+  let averageValue = tempValue / data.length;
+  const yScale = scaleLinear({
+    range: [yMax, 0],
+    round: true,
+    domain: [0, Math.max(...data.map(y))],
+  });
+  function compose(scale: any, accessor: any) {
+    return (data: any) => scale(accessor(data));
+  }
+  const xPoint = compose(xScale, x);
+
+  const yPoint = compose(yScale, y);
+  return (
+    <>
+      <svg ref={containerRef} width={parentWidth} height={parentHeight}>
+        <Group
+          left={value.style?.labelStyle?.leftLabelMargin}
+          top={value.style?.labelStyle?.topLabelMargin}
+        >
+          {value.main?.axisLeft && (
+            <LeftAxis value={value} yScale={yScale} parentWidth={parentWidth} />
+          )}
+          {data.map((d: any) => {
+            const barHeight = yMax - yPoint(d);
+            const fillBarColor =
+              averageValue / 2 > d[arr[1]]
+                ? value.style?.barStyle?.lowValueColor
+                : averageValue < d[arr[1]]
+                ? value.style?.barStyle?.highValueColor
+                : value.style?.barStyle?.mediumValueColor;
+            return (
+              <>
+                <Bar
+                  key={`bar-${barHeight}`}
+                  x={xPoint(d)}
+                  y={yMax - barHeight}
+                  radius={value.style?.barStyle?.barRadius || 0}
+                  height={barHeight}
+                  width={xScale.bandwidth()}
+                  fill={fillBarColor}
+                  onMouseOver={(e) => handleMouse(e, d)}
+                  onMouseOut={hideTooltip}
+                />
+              </>
+            );
+          })}
+          {value.main?.axisBottom && (
+            <BottomAxis
+              data={data}
+              value={value}
+              yMax={yMax}
+              xScale={xScale}
+              parentWidth={parentWidth}
+            />
+          )}
+        </Group>
+      </svg>
+      {tooltipOpen && (
+        <ToolTip
+          style={{...value?.style}}
+          top={tooltipTop}
+          left={tooltipLeft}
+          tooltipData={tooltipData}
+        />
+      )}
+    </>
+  );
+};
+
+export default DrawBarGraph;

package/src/component/BarGraph/DrawHorizontalBarGraph.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { BarStackHorizontal } from "@visx/shape";
+import { SeriesPoint } from "@visx/shape/lib/types";
+import { Group } from "@visx/group";
+// import { AxisBottom, AxisLeft } from "@visx/axis";
+import  {
+  CityTemperature,
+} from "@visx/mock-data/lib/mocks/cityTemperature";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+// import { timeParse, timeFormat } from "@visx/vendor/d3-time-format";
+import { withTooltip, Tooltip, defaultStyles } from "@visx/tooltip";
+import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
+import BottomAxis from "../BottomAxis";
+import LeftAxis from "../LeftAxis";
+
+type CityName = "New York" | "San Francisco" | "Austin";
+
+type TooltipData = {
+  bar: SeriesPoint<CityTemperature>;
+  key: CityName;
+  index: number;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  color: string;
+};
+
+export type BarStackHorizontalProps = {
+  width?: number;
+  height?: number;
+  margin: { top: number; right: number; bottom: number; left: number };
+  events?: boolean;
+  barValue: any;
+};
+export default withTooltip<BarStackHorizontalProps, TooltipData>(
+  ({
+    width=600,
+    height=400,
+    events = false,
+    margin,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+    barValue,
+  }: BarStackHorizontalProps & WithTooltipProvidedProps<TooltipData>) => {
+    const xMax = width - margin.left - margin.right;
+    const yMax = height - margin.top - margin.bottom;
+    const tooltipStyles = {
+      ...defaultStyles,
+      padding: "12px",
+      minWidth: 60,
+      backgroundColor: "rgba(0,0,0,0.9)",
+      color: "white",
+    };
+    const data: any[] = barValue?.main?.data;
+    console.log(data);
+    const keys = Object.keys(data[0]).filter((y) => y !== "y") as CityName[];
+
+    const temperatureTotals = data.reduce((allTotals, currentDate) => {
+      const totalTemperature = keys.reduce((dailyTotal, k) => {
+        dailyTotal += Number(currentDate[k]);
+        return dailyTotal;
+      }, 0);
+      allTotals.push(totalTemperature);
+      return allTotals;
+    }, [] as number[]);
+
+    const getDate = (d: any) => d.y;
+
+    // scales
+    const temperatureScale = scaleLinear<number>({
+      domain: [0, Math.max(...temperatureTotals)],
+      nice: true,
+    });
+    const dateScale = scaleBand<string>({
+      domain: data.map(getDate),
+      padding: 0.2,
+    });
+    const colorScale = scaleOrdinal<CityName, string>({
+      domain: keys,
+      range: [barValue.style.barStyle.color],
+    });
+
+    let tooltipTimeout: number;
+    temperatureScale.rangeRound([0, xMax]);
+    dateScale.rangeRound([yMax, 0]);
+
+    return width < 10 ? null : (
+      <div>
+        <svg width={width} height={height}>
+          <rect
+            width={width }
+            height={height}
+            // width={barValue?.style?.containerStyle?.width || 600}
+            // height={barValue?.style?.containerStyle?.height || 400}
+            fill={barValue?.style?.containerStyle?.background || "#eaedff"}
+            rx={14}
+          />
+          <Group top={margin.top} left={margin.left}>
+            <BarStackHorizontal<CityTemperature, CityName>
+              data={data}
+              keys={keys}
+              height={yMax}
+              y={getDate}
+              xScale={temperatureScale}
+              yScale={dateScale}
+              color={colorScale}
+            >
+              {(barStacks) =>
+                barStacks.map((barStack) =>
+                  barStack.bars.map((bar) => (
+                    <rect
+                      key={`barstack-horizontal-${barStack.index}-${bar.index}`}
+                      x={bar.x}
+                      y={bar.y}
+                      width={bar.width}
+                      height={bar.height}
+                      fill={bar.color}
+                      onClick={() => {
+                        if (events) alert(`clicked: ${JSON.stringify(bar)}`);
+                      }}
+                      onMouseLeave={() => {
+                        tooltipTimeout = window.setTimeout(() => {
+                          hideTooltip();
+                        }, 300);
+                      }}
+                      onMouseMove={() => {
+                        if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                        const top = bar.y + margin.top;
+                        const left = bar.x + bar.width + margin.left;
+                        showTooltip({
+                          tooltipData: bar,
+                          tooltipTop: top,
+                          tooltipLeft: left,
+                        });
+                      }}
+                    />
+                  ))
+                )
+              }
+            </BarStackHorizontal>
+            <LeftAxis value={barValue} yScale={dateScale} parentWidth={500} />
+            <BottomAxis
+              data={data}
+              value={barValue}
+              yMax={yMax}
+              xScale={temperatureScale}
+              parentWidth={500}
+            />
+          </Group>
+        </svg>
+        {tooltipOpen && tooltipData && (
+          <Tooltip top={tooltipTop} left={tooltipLeft} style={tooltipStyles}>
+            <div style={{ marginBottom: "5px" }}>
+              {tooltipData.bar.data[tooltipData.key]}
+            </div>
+            <div style={{ color: colorScale(tooltipData.key) }}>
+              <strong>{getDate(tooltipData.bar.data)}</strong>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+);

package/src/component/BarGraph/HorizontalBarGraph.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { finalDataProvider } from "../../utils/finalDataProvider";
+import DrawHorizontalBarGraph from "./DrawHorizontalBarGraph";
+import { ParentSize } from "@visx/responsive";
+
+const HorizontalBarGraph = ({ value }:any) => {
+  const barData:any = finalDataProvider("HorizontalBarGraph",value)
+
+  let GraphRender = (
+    <ParentSize>
+      {(parent:any) => (
+        <DrawHorizontalBarGraph
+          width={parent.width}
+          height={parseInt(barData?.style?.containerStyle?.height||400)}
+          margin= {{ top: barData?.style?.labelStyle?.margin?.top||10, right: barData?.style?.labelStyle?.margin?.right||10,bottom:  barData?.style?.labelStyle?.margin?.bottom||20 ,left: barData?.style?.labelStyle?.margin?.left||60 }}
+          barValue={barData}
+        />
+      )}
+    </ParentSize>
+  );
+  return <div style={barData.style.containerStyle}>
+    {barData.main?.header && <div style={barData.style.headerStyle}>{barData?.main?.header}</div> }
+    {GraphRender}
+  </div>;
+};
+export default HorizontalBarGraph;

package/src/component/BottomAxis.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { AxisBottom } from "@visx/axis";
+import { bottomAxisProps } from '../interface/interface';
+const BottomAxis = ({data,yMax,value,xScale,parentWidth}:bottomAxisProps) => {
+  
+  return (
+    <AxisBottom
+    numTicks={data.length}
+    top={yMax}
+    hideTicks={value.main?.hideTicks}
+    hideAxisLine={value.main?.hideBottomAxisLine}
+    strokeWidth={value.style?.labelStyle?.bottomAxisWidth}
+    scale={xScale}
+    stroke={value.style?.labelStyle?.tickColor}
+    labelOffset={value.style?.labelStyle?.bottomLabelOffset}
+    label={value.main?.bottomLabel}
+    labelProps={{
+      fill: value.style?.labelStyle?.labelColor,
+      fontSize: value.style?.labelStyle?.fontSize,
+      fontWeight: value.style?.labelStyle?.fontWeight,
+      fontFamily: value.style?.labelStyle?.fontWeight,
+    }}
+    tickStroke={value.style?.labelStyle?.tickColor}
+    tickLabelProps={() => ({
+      fill: value.style?.labelStyle?.tickLabelColor,
+      fontSize: value.style?.labelStyle?.tickFontSize ||11,
+      textAnchor: "middle",
+    })}
+  />
+  )
+}
+export default BottomAxis

package/src/component/LeftAxis.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { AxisLeft} from "@visx/axis";
+import { leftAxisProps } from '../interface/interface';
+const LeftAxis = ({value,yScale,parentWidth}:leftAxisProps) => {
+  return (
+    <AxisLeft
+              numTicks={value.main?.numTicks}
+              scale={yScale}
+              top={0}
+              label={value.main?.leftLabel}
+              tickStroke={value.style?.labelStyle?.tickColor}
+              strokeWidth={value.style?.labelStyle?.rightAxisWidth}
+              hideTicks={value.main?.hideLeftTicks}
+              labelOffset={value.style?.labelStyle?.leftLabelOffset}
+              labelProps={{
+                fill: value.style?.labelStyle?.labelColor,
+                fontSize: value.style?.labelStyle?.fontSize,
+                fontWeight: value.style?.labelStyle?.fontWeight,
+                fontFamily: value.style?.labelStyle?.fontWeight,
+              }}
+              hideAxisLine={value.main?.hideLeftAxisLine}
+              tickLabelProps={(e) => ({
+                fill: value.style?.labelStyle?.tickLabelColor,
+                fontSize:11,
+                textAnchor: "end",
+                dy: "0.33em"
+              })}
+            />
+  )
+}
+
+export default LeftAxis

package/src/component/Legend.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { LegendOrdinal, LegendItem, LegendLabel } from "@visx/legend";
+import { scaleOrdinal } from "@visx/scale";
+export function Legend({ value }: any) {
+  const legendGlyphSize = value?.main?.legend?.colorRectWidth || 15;
+  const ordinalColorScale = scaleOrdinal({
+    domain: value?.main?.tooltipDataKey,
+    range: value?.style?.pieStyle?.colorRange,
+  });
+  return (
+    <div className="legend" style={value?.style?.legendStyle?.legend}>
+      <div className="title" style={value?.style?.legendStyle?.legendTitle}>
+        {value?.main?.legend?.legendTitle}
+      </div>
+      <LegendOrdinal
+        scale={ordinalColorScale}
+        labelFormat={(label: any) => `${label.toUpperCase()}`}
+      >
+        {(labels) => (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: value?.main?.legend?.direction || "row",
+            }}
+          >
+            {labels.map((label: any, i: number) => (
+              <LegendItem
+                key={`legend-quantile-${i}`}
+                margin="0 5px"
+                onClick={(events) => {
+                  if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                }}
+              >
+                <svg width={legendGlyphSize} height={legendGlyphSize}>
+                  <rect
+                    fill={label.value}
+                    width={legendGlyphSize}
+                    height={legendGlyphSize}
+                  />
+                </svg>
+                <LegendLabel
+                  align={`${value?.main?.legend?.align || "left"}`}
+                  margin="0 0 0 4px"
+                >
+                  {label.text}
+                </LegendLabel>
+              </LegendItem>
+            ))}
+          </div>
+        )}
+      </LegendOrdinal>
+    </div>
+  );
+}
+export default Legend;

package/src/component/LineGraph/DrawLineGraph.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  AnimatedAxis,
+  AnimatedLineSeries,
+  XYChart,
+  Tooltip,
+  AnimatedGrid
+} from "@visx/xychart";
+import Legend from "../Legend";
+const DrawGraph = ({ value }:any) => {
+  const data = value?.main?.data;
+  const arr = (value.main.xAxisValue && value.main.yAxisValue) ? [value.main.xAxisValue,value.main.yAxisValue] : Object.keys(data[0][0]);
+  const accessors = { xAccessor: (d:any) => d[arr[0]], yAccessor: (d:any) => d[arr[1]] };
+
+
+  return (
+    <>
+    {value.main.legendAvailable && 
+    <Legend  value={value}/>
+    }
+    <XYChart height={parseInt(value.style?.containerStyle?.height)} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
+      <AnimatedAxis orientation="left" hideAxisLine={value.main.hideLeftAxisLine}
+       label={value.main.leftLabel}
+       left={value.style?.labelStyle?.leftLabelMargin||70} 
+       labelOffset={value.style?.labelStyle?.leftLabelOffset||32} 
+      //  fill={value.style?.labelStyle?.labelColor}
+       labelProps={{
+        fill: value.style?.labelStyle?.labelColor,
+        fontSize:value.style?.labelStyle?.fontSize
+      }}
+      tickLabelProps={(e) => ({
+        fill: value.style?.labelStyle?.labelColor})}
+       />
+      <AnimatedAxis orientation="bottom" hideAxisLine={value.main.hideBottomAxisLine} 
+      label={value.main.bottomLabel}
+      labelProps={{
+        fill: value.style?.labelStyle?.labelColor,
+        fontSize:value.style?.labelStyle?.fontSize
+      }}
+      tickLabelProps={(e) => ({
+        fill: value.style?.labelStyle?.labelColor})}
+        labelOffset={value.style?.labelStyle?.bottomLabelOffset||32}
+      // fill={value.style?.labelStyle?.labelColor}
+       />
+      <AnimatedGrid
+       columns={value.main.grid} 
+       numTicks={value.main.numHidden?0:value.main?.data[0].length-1} />
+      {
+        value.main?.data.map((elem:any, i:number) => {
+          return (
+            <AnimatedLineSeries
+              dataKey={value.main.tooltipDataKey[i]}
+              data={elem}
+            fill={value.style?.lineStyle?.lineAreaColor}
+            fillOpacity={value.style?.lineStyle?.lineAreaOpacity}
+            
+            floodColor={"green"}
+            floodOpacity={1}
+              stroke={value.style?.lineStyle?.colorRange[i]}
+              {...accessors}
+            />)
+        })
+      }
+      <Tooltip
+        snapTooltipToDatumX
+        snapTooltipToDatumY
+        showVerticalCrosshair  
+        showSeriesGlyphs
+        renderTooltip={({ tooltipData, colorScale }:any) => (
+             //@ts-ignore
+           <div>
+         
+            <div style={{
+              color:colorScale(tooltipData.nearestDatum.key) }}>
+              {tooltipData?.nearestDatum?.key}
+            </div>
+            {accessors.xAccessor(tooltipData?.nearestDatum?.datum)}
+            {accessors.yAccessor(tooltipData?.nearestDatum?.datum)}
+          </div>
+        )}
+      />
+    </XYChart></>
+  );
+};
+
+export default DrawGraph;

package/src/component/LineGraph/LineGraph.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import DrawLineGraph from "./DrawLineGraph";
+import { finalDataProvider } from "../../utils/finalDataProvider";
+
+const LineGraph = ({ value }:any) => {
+  const lineData = finalDataProvider("LineGraph", value);
+  return (
+    <div style={lineData?.style?.containerStyle}>
+      {lineData?.main?.header && (
+        <div style={lineData?.style?.headerStyle}>{lineData?.main?.header}</div>
+      )}
+      <DrawLineGraph value={lineData} />
+    </div>
+  );
+};
+
+export default LineGraph;