impaktapps-design 0.2.993-graph.1 → 0.2.993-testTimer.2

package/dist/src/component/BarGraph/DrawHorizontalBarGraph.d.ts

@@ -0,0 +1,3 @@
+import { BarStackHorizontalProps } from "../../interface/interface";
+declare const _default: ({ theme, width, height, events, margin, barValue, }: BarStackHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/src/component/BarGraph/HorizontalBarGraph.d.ts

@@ -1,3 +1,2 @@
-import { BarStackHorizontalProps } from "../../interface/interface";
-declare const _default: ({ theme, width, height, events, margin, barValue, }: BarStackHorizontalProps) => import("react/jsx-runtime").JSX.Element;
-export default _default;
+declare const HorizontalBarGraph: ({ value, theme }: any) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalBarGraph;

package/dist/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Roboto;600&display=swap";.visx-tooltip-glyph{svg {width: 10px; height: 10px;}}.container{margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}
+@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

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.2.993-graph.1",
+  "version": "0.2.993-testTimer.2",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@emotion/react": "^11.11.4",

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -71,39 +71,12 @@ export default function DrawBarGraph({
     range: value.style.barStyle.colorRange,
   });
 
-  const baseCharacterWidth = 7;
-  
-  let ticksArray: any[] = [];
-  ticksArray = tempScale.ticks();
-  
-  const maxLength = Math.max(
-    ...ticksArray.map((label) => String(label || "").length)
-  );
-  
-  const calculatedOffset = maxLength * baseCharacterWidth + 10;
-
-  
-  const baseCharacterWidthBottom = 5;
-  
-  let ticksArrayBottom: any[] = [];
-  ticksArrayBottom = dateScale.domain();
-  
-  const maxLengthBottom = Math.max(
-    ...ticksArrayBottom.map((label) => String(label || "").length)
-  );
-  
-  const calculatedOffsetBottom = maxLengthBottom * baseCharacterWidthBottom + 10;
-
-  margin.left = calculatedOffset+20;
-  margin.bottom = value.main?.bottomAxisAngle ? calculatedOffsetBottom+40 : margin.bottom;
-  
   const xMax = width - margin.left - margin.right;
   const yMax = height - margin.top - margin.bottom;
 
   dateScale.rangeRound([0, xMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.range([yMax, 0]);
-
   const {
     tooltipData,
     tooltipLeft,
@@ -141,14 +114,6 @@ export default function DrawBarGraph({
 
   return width < 10 ? null : (
     <div>
-      {value?.main?.legendAvailable && keys.length > 1 && (
-        <Legend
-          dataKeyArray={keys}
-          colorRange={value.style.barStyle.colorRange}
-          value={value}
-          theme={theme.myTheme}
-        />
-      )}
       <svg width={width} height={height}>
         <rect
           x={0}
@@ -280,6 +245,13 @@ export default function DrawBarGraph({
           parentWidth={width}
         />
       </svg>
+      {value?.main?.legendAvailable && keys.length > 1 && (
+        <Legend
+          dataKeyArray={keys}
+          colorRange={value.style.barStyle.colorRange}
+          value={value}
+        />
+      )}
       {tooltipOpen && (
         <ToolTip
           value={value}

package/src/component/BarGraph/DrawHorizontalBarGraph.tsx

@@ -1,32 +1,25 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { BarGroupHorizontal, BarStackHorizontal } from "@visx/shape";
+import { SeriesPoint } from "@visx/shape/lib/types";
 import { Group } from "@visx/group";
-import { BarGroup } from "@visx/shape";
-import { BarStack } from "@visx/shape";
+import { CityTemperature } from "@visx/mock-data/lib/mocks/cityTemperature";
 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 LeftAxis from "../LeftAxis";
+import { Grid } from "@visx/grid";
+import { BarStackHorizontalProps, CityName } from "../../interface/interface";
 import ToolTip from "../ToolTip";
 import Legend from "../Legend";
-import { Grid } from "@visx/grid";
-import { ScaleOrdinal } from "d3-scale";
-import { colors } from "@mui/material";
 
-const defaultMargin = { top: 40, right: 0, bottom: 0, left: 0 };
-export default function DrawBarGraph({
+export default ({
   theme,
-  width,
-  height,
+  width = 600,
+  height = 400,
   events = false,
-  margin = defaultMargin,
-  value,
-}: BarGroupProps) {
-  const data: any[] = value.main?.data;
-  const keys = Object.keys(data[0]).filter(
-    (d) => d !== value.main.xAxisValue
-  ) as any[];
-
+  margin,
+  barValue,
+}: BarStackHorizontalProps) => {
   const [hoveredBar, setHoveredBar] = useState<{
     date: any;
     city: number;
@@ -35,7 +28,14 @@ export default function DrawBarGraph({
     city: null,
   });
 
-  const getDate = (d: any) => d[value.main.xAxisValue];
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+  const data: any[] = barValue?.main?.data;
+
+  const keys = Object.keys(data[0]).filter(
+    (d) => d !== barValue.main.xAxisValue
+  ) as any[];
+
   const temperatureTotals = data.reduce((allTotals, currentDate) => {
     const totalTemperature = keys.reduce((dailyTotal, k) => {
       dailyTotal += Number(currentDate[k]);
@@ -45,16 +45,11 @@ export default function DrawBarGraph({
     return allTotals;
   }, [] as number[]);
 
-  const dateScale = scaleBand<string>({
-    domain: data.map(getDate),
-    padding: 0.4,
-  });
-  const cityScale = scaleBand<string>({
-    domain: keys,
-  });
-  const tempScale = scaleLinear<number>({
+  const getDate = (d: any) => d[barValue.main.xAxisValue];
+
+  const temperatureScale = scaleLinear<number>({
     domain:
-      value?.main?.type === "StackBarGraph"
+      barValue?.main?.type === "HorizontalStackBarGraph"
         ? [0, Math.max(...temperatureTotals)]
         : [
             0,
@@ -66,43 +61,21 @@ export default function DrawBarGraph({
           ],
     nice: true,
   });
+  const dateScale = scaleBand<string>({
+    domain: data.map(getDate),
+    padding: 0.4,
+  });
+  const cityScale = scaleBand<string>({
+    domain: keys,
+  });
   const colorScale = scaleOrdinal<string, string>({
     domain: keys,
-    range: value.style.barStyle.colorRange,
+    range: barValue.style.barStyle.colorRange,
   });
 
-  const baseCharacterWidth = 7;
-  
-  let ticksArray: any[] = [];
-  ticksArray = tempScale.ticks();
-  
-  const maxLength = Math.max(
-    ...ticksArray.map((label) => String(label || "").length)
-  );
-  
-  const calculatedOffset = maxLength * baseCharacterWidth + 10;
-
-  
-  const baseCharacterWidthBottom = 5;
-  
-  let ticksArrayBottom: any[] = [];
-  ticksArrayBottom = dateScale.domain();
-  
-  const maxLengthBottom = Math.max(
-    ...ticksArrayBottom.map((label) => String(label || "").length)
-  );
-  
-  const calculatedOffsetBottom = maxLengthBottom * baseCharacterWidthBottom + 10;
-
-  margin.left = calculatedOffset+20;
-  margin.bottom = value.main?.bottomAxisAngle ? calculatedOffsetBottom+40 : margin.bottom;
-  
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  dateScale.rangeRound([0, xMax]);
+  temperatureScale.rangeRound([0, xMax]);
+  dateScale.rangeRound([yMax, 0]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
-  tempScale.range([yMax, 0]);
 
   const {
     tooltipData,
@@ -112,12 +85,13 @@ export default function DrawBarGraph({
     showTooltip,
     hideTooltip,
   }: any = useTooltip();
+
   const handleMouse = (event: any, bar: any, barGroup: any) => {
     setHoveredBar({ date: barGroup, city: bar.index });
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: {groupData : data[barGroup.index], highlightedBar: bar},
+      tooltipData: { groupData: data[barGroup.index], highlightedBar: bar },
     });
   };
   const handleMouseOut = (event: any) => {
@@ -129,40 +103,32 @@ export default function DrawBarGraph({
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: {groupData: data[bar.index], highlightedBar: bar},
+      tooltipData: { groupData: data[bar.index], highlightedBar: bar },
     });
   };
   function calcWidthofBar(date: any): number {
     return date?.bars.reduce(
-      (totalWidth, bar) => totalWidth + Math.min(bar.width, 15),
+      (totalWidth, bar) => totalWidth + Math.min(bar.height, 15),
       0
     );
   }
 
   return width < 10 ? null : (
     <div>
-      {value?.main?.legendAvailable && keys.length > 1 && (
-        <Legend
-          dataKeyArray={keys}
-          colorRange={value.style.barStyle.colorRange}
-          value={value}
-          theme={theme.myTheme}
-        />
-      )}
       <svg width={width} height={height}>
         <rect
           x={0}
           y={0}
           width={width}
           height={height}
-          fill={value.style.containerStyle.background || "#612efb"}
+          fill={barValue.style.containerStyle.background || "#612efb"}
         />
         <Grid
           top={margin.top}
           left={margin.left}
-          xScale={dateScale}
-          yScale={tempScale}
-          width={width - margin.left - margin.right}
+          xScale={temperatureScale}
+          yScale={dateScale}
+          width={xMax}
           height={yMax}
           stroke="black"
           xOffset={dateScale.bandwidth() / 50}
@@ -174,62 +140,66 @@ export default function DrawBarGraph({
           {hoveredBar && (
             <rect
               style={{ display: hoveredBar.date ? "block" : "none" }}
-              x={
-                value.main.type === "StackBarGraph"
-                  ? hoveredBar?.date?.bars[hoveredBar.city].x -
-                    (Math.min(hoveredBar?.date?.bars[0].width, 15) -
-                      hoveredBar?.date?.bars[0].width)/2
-                  : hoveredBar.date?.x0 -
-                      (Math.min(hoveredBar?.date?.bars[0].width, 15) -
-                        hoveredBar?.date?.bars[0].width) || 0
+              y={
+                barValue.main.type === "HorizontalStackBarGraph"
+                  ? hoveredBar?.date?.bars[hoveredBar.city].y -
+                    (Math.min(hoveredBar?.date?.bars[0].height, 15) -
+                      hoveredBar?.date?.bars[0].height) /
+                      2
+                  : hoveredBar.date?.y0 -
+                      (Math.min(hoveredBar?.date?.bars[0].height, 15) -
+                        hoveredBar?.date?.bars[0].height) || 0
               }
-              width={
-                value.main.type !== "StackBarGraph"
+              width={xMax}
+              height={
+                barValue.main.type !== "HorizontalStackBarGraph"
                   ? calcWidthofBar(hoveredBar?.date)
-                  : Math.min(hoveredBar?.date?.bars[0].width, 15)
+                  : Math.min(hoveredBar?.date?.bars[0].height, 15)
               }
-              height={yMax}
-              fill={value.style?.barStyle?.hoverBackgroundColor}
+              fill={barValue.style?.barStyle?.hoverBackgroundColor}
               opacity={1}
             />
           )}
-          <LeftAxis value={value} yScale={tempScale} parentWidth={width} />
-          {value?.main?.type === "StackBarGraph" ? (
-            <BarStack<any, any>
+          {barValue.main.type === "HorizontalStackBarGraph" ? (
+            <BarStackHorizontal
               data={data}
               keys={keys}
-              x={getDate}
-              xScale={dateScale}
-              yScale={tempScale}
+              height={yMax}
+              y={getDate}
+              xScale={temperatureScale}
+              yScale={dateScale}
               color={colorScale}
             >
               {(barStacks) =>
                 barStacks.map((barStack) =>
                   barStack.bars.map((bar) => (
                     <rect
-                      key={`bar-stack-${barStack.index}-${bar.index}`}
-                      x={bar.x - (Math.min(bar.width, 15) - bar.width) / 2}
-                      y={bar.y}
-                      height={bar.height}
-                      width={Math.min(bar.width, 15)}
+                      key={`barstack-horizontal-${barStack.index}-${bar.index}`}
+                      x={bar.x}
+                      y={bar.y - (Math.min(bar.height, 15) - bar.height) / 2}
+                      width={bar.width}
+                      height={Math.min(bar.height, 15)}
                       fill={bar.color}
                       onMouseOver={(e) => stackhHandleMouse(e, bar, barStack)}
                       onMouseOut={(e) => handleMouseOut(e)}
-                      stroke={hoveredBar.city === bar.index ? 'black' : "transparent"}
+                      stroke={
+                        hoveredBar.city === bar.index ? "black" : "transparent"
+                      }
                     />
                   ))
                 )
               }
-            </BarStack>
+            </BarStackHorizontal>
           ) : (
-            <BarGroup
+            <BarGroupHorizontal
               data={data}
               keys={keys}
+              width={xMax}
               height={yMax}
-              x0={getDate}
-              x0Scale={dateScale}
-              x1Scale={cityScale}
-              yScale={tempScale}
+              y0={getDate}
+              y0Scale={dateScale}
+              y1Scale={cityScale}
+              xScale={temperatureScale}
               color={(key, index) => {
                 const color = colorScale(key);
                 const opColor = `${colorScale(key)}50`;
@@ -243,46 +213,57 @@ export default function DrawBarGraph({
               {(barGroups) =>
                 barGroups.map((barGroup) => (
                   <Group
-                    key={`bar-group-${barGroup.index}-${barGroup.x0}`}
-                    left={barGroup.x0}
+                    key={`bar-group-${barGroup.index}-${barGroup.y0}`}
+                    top={barGroup.y0}
                   >
                     {barGroup.bars.map((bar) => {
-                      const barWidth = Math.min(bar.width, 15);
-                      const barX =
+                      const barHeight = Math.min(bar.height, 15);
+                      const barY =
                         bar.index === 0
-                          ? bar.x - (barWidth - bar.width)
-                          : bar.x;
+                          ? bar.y - (barHeight - bar.height)
+                          : bar.y;
                       return (
                         <rect
                           key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                          x={barX}
-                          y={bar.y}
-                          width={barWidth}
-                          height={bar.height}
+                          y={barY}
+                          x={bar.x}
+                          width={bar.width}
+                          height={barHeight}
                           fill={bar.color}
                           onMouseOver={(e) => handleMouse(e, bar, barGroup)}
                           onMouseOut={(e) => handleMouseOut(e)}
-                          stroke={hoveredBar.city === bar.index ? 'black' : "transparent"}
+                          stroke={
+                            hoveredBar.city === bar.index
+                              ? "black"
+                              : "transparent"
+                          }
                         />
                       );
                     })}
                   </Group>
                 ))
               }
-            </BarGroup>
+            </BarGroupHorizontal>
           )}
+          <LeftAxis value={barValue} yScale={dateScale} parentWidth={width} />
+          <BottomAxis
+            value={barValue}
+            yMax={yMax}
+            xScale={temperatureScale}
+            parentWidth={width}
+          />
         </Group>
-        <BottomAxis
-          yMax={yMax + margin.top}
-          value={value}
-          left={margin.left}
-          xScale={dateScale}
-          parentWidth={width}
-        />
       </svg>
-      {tooltipOpen && (
+      {barValue?.main?.legendAvailable && keys.length > 1 && (
+        <Legend
+          dataKeyArray={keys}
+          colorRange={barValue.style.barStyle.colorRange}
+          value={barValue}
+        />
+      )}
+      {tooltipOpen && tooltipData && (
         <ToolTip
-          value={value}
+          value={barValue}
           theme={theme}
           top={tooltipTop}
           left={tooltipLeft}
@@ -292,4 +273,4 @@ export default function DrawBarGraph({
       )}
     </div>
   );
-}
+};