impaktapps-design 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@visx/visx": "^3.1.2",

package/src/component/BarGraph/BarGraph.tsx

@@ -9,12 +9,10 @@ const BarGraph = ({ value }:any) => {
     <ParentSize>
       {(parent) => (
         <DrawBarGraph
-          parentWidth={parent.width}
-          parentHeight={barData?.style?.containerStyle?.height}
+          width={parent.width||400}
+          height={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 }}
           value={barData}
-          parentRef={parent.ref}
-          resizeParent={parent.resize}
         />
       )}
     </ParentSize>

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -1,24 +1,57 @@
 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 { BarGroup } from "@visx/shape";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
 import LeftAxis from "../LeftAxis";
+import BottomAxis from "../BottomAxis";
+import { BarGroupProps } from "../../interface/interface";
+import { useTooltip } from "@visx/tooltip";
+import ToolTip from "../ToolTip";
+
+type barValuesType = any;
+const defaultMargin = { top: 20, right: 0, bottom: 40, left:40  };
+export default function DrawBarGraph({
+  width,
+  height,
+  events = false,
+  margin = defaultMargin,
+  value
+}: BarGroupProps) {
+    const data:any[] = value.main?.data;
+const keys = Object.keys(data[0]).filter((d) => d !== "label") as barValuesType[];
 
-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]);
+// accessors
+const getDate = (d: any) => d.label;
+
+// scales
+const dateScale = scaleBand<string>({
+  domain: data.map(getDate),
+  padding: 0.2
+});
+const cityScale = scaleBand<string>({
+  domain: keys,
+  padding: 0.1
+});
+const tempScale = scaleLinear<number>({
+  domain: [
+    0,
+    Math.max(...data.map((d:any) => Math.max(...keys.map((key) => Number(d[key])))))
+  ]
+});
+const colorScale = scaleOrdinal<string, string>({
+  domain: keys,
+  range: [value.style?.barStyle?.color?.firstBarColor||"#aeeef8" ,
+  value.style?.barStyle?.color?.secondBarColor||"e5fd3d" , 
+  value.style?.barStyle?.color?.thirdBarColor||"#9caff6" ]
+});
+  // bounds
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  // update scale output dimensions
+  dateScale.rangeRound([0, xMax]);
+  cityScale.rangeRound([0, dateScale.bandwidth()]);
+  tempScale.range([yMax, 0]);
   const {
     tooltipData,
     tooltipLeft,
@@ -27,97 +60,84 @@ margin
     showTooltip,
     hideTooltip,
   }: any = useTooltip();
-  const { containerRef } = useTooltipInPortal({
-    detectBounds: true,
-    scroll: true,
-  });
   const handleMouse = (event: any, datum: any) => {
+    console.log(datum)
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: [datum[arr[0]], datum[arr[1]]],
+      tooltipData: [datum.key,datum.value,datum.color],
+    //   [datum["label"], datum["v1"]],
     });
   };
-  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}
+  return width < 10 ? null : (
+    <div>
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={value.style.containerStyle.background||"#612efb"}
+        rx={14}
+      />    
+      <Group top={margin.top} left={margin.left}>
+      <LeftAxis value={value} yScale={tempScale} parentWidth={width} />
+        <BarGroup
+          data={data}
+          keys={keys}
+          height={yMax}
+          x0={getDate}
+          x0Scale={dateScale}
+          x1Scale={cityScale}
+          yScale={tempScale}
+          color={colorScale}
         >
-          {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 && (
+          {(barGroups) =>
+            barGroups.map((barGroup) => (
+              <Group
+                key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+                left={barGroup.x0}
+              >
+                {barGroup.bars.map((bar) => (
+                  <rect
+                    key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
+                    x={bar.x}
+                    y={bar.y}
+                    width={bar.width}
+                    height={bar.height}
+                    fill={bar.color}
+                    rx={4}
+                    onMouseOver={(e) => handleMouse(e, bar)}
+                    onMouseOut={hideTooltip}
+                    onClick={() => {
+                      if (!events) return;
+                      const { key, value } = bar;
+                      alert(JSON.stringify({ key, value }));
+                    }}
+                  />
+                ))}
+              </Group>
+            ))
+          }
+        </BarGroup>
+      </Group>
+   <BottomAxis 
+   yMax={yMax + margin.top}
+   value={value}
+   left={margin.left}
+   xScale={dateScale}
+   parentWidth={width}
+   />
+
+    </svg>
+    {tooltipOpen &&
         <ToolTip
-          style={{...value?.style}}
+          style={{...value?.style,tooltipbackground:tooltipData[2]}}
           top={tooltipTop}
           left={tooltipLeft}
           tooltipData={tooltipData}
         />
-      )}
-    </>
+        }
+  </div>
   );
-};
-
-export default DrawBarGraph;
+}

package/src/component/BarGraph/DrawHorizontalBarGraph.tsx

@@ -12,27 +12,9 @@ import { withTooltip, Tooltip, defaultStyles } from "@visx/tooltip";
 import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
 import BottomAxis from "../BottomAxis";
 import LeftAxis from "../LeftAxis";
+import { BarStackHorizontalProps, CityName, TooltipData } from "../../interface/interface";
 
-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,

package/src/component/ToolTip.tsx

@@ -8,27 +8,29 @@ const ToolTip = ({ style, top, left, tooltipData }: tooltipProps) => {
   });
   return (
     <TooltipInPortal 
-  
-     key={Math.random()} top={top} left={left}>
+     key={Math.random()}
+      top={top} left={left}
+      >
       <div
         style={{
-          width: "100%",
-          // paddingleft: "10px",
-          height: "auto",
+          height: "50px",
           textAlign:"center",
           background:"black",
+          padding:"10px",
          boxShadow:"2px 2px 5px black",
           color:"#6c5efb",
-          padding:"15px",
+          // padding:"5px",
+          backgroundColor:style?.tooltipbackground||"black",
           ...style?.tooltipStyle,
+          margin:"-20px",
         }}
       >
-        <div style={{paddingBottom:"2px",color:"white"}}>
+        <div style={{padding:"4px 10px",backgroundColor:"black",color:"white",borderRadius:"5px"}}>
         {tooltipData[0]}
         </div>
        
       
-      <div style={{marginTop:"10px"}}>
+      <div style={{marginTop:"10px",fontWeight:700}}>
         {tooltipData[1]}
       </div>
       </div>

package/src/interface/interface.ts

@@ -4,10 +4,36 @@ export interface leftAxisProps {
     parentWidth: number
 }
 export interface bottomAxisProps {
-    data: any[], yMax: number, value: any, xScale: any, parentWidth: number
+   left?:number, data?: any[], yMax: number, value: any, xScale: any, parentWidth: number
 }
 
 export interface tooltipProps {
     style:any,
     top:any,left:any,tooltipData:any
-}
+}
+export type BarGroupProps = {
+    width: number;
+    height: number;
+    margin?: { top: number; right: number; bottom: number; left: number };
+    events?: boolean;
+    value:any
+  };
+export  type CityName = "v1" | "v2" | "v3";
+export type TooltipData = {
+    bar: any;
+    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;
+  };