style(#178): extended @dsvgui/line for labels and color

sametcodes · sametcodes · commit 6148bf64380f · 2023-04-22T02:50:22.000+03:00
- Added line color
- Adjusted width and height according to the content
- Added period labels
diff --git a/lib/@dsvgui/components/calendar/index.stories.tsx b/lib/@dsvgui/components/calendar/index.stories.tsx
@@ -23,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<typeof Calendar>;
 
-export const produceFakeDates = () => {
+const produceFakeDates = () => {
   const today = Date.now();
   const fakeDates: { [key: string]: number } = {};
   for (let i = 0; i < 365; i++) {
@@ -33,7 +33,6 @@ export const produceFakeDates = () => {
   }
   return fakeDates;
 };
-
 const dates = produceFakeDates();
 
 export const Regular: Story = {
diff --git a/lib/@dsvgui/components/line/index.stories.tsx b/lib/@dsvgui/components/line/index.stories.tsx
@@ -4,16 +4,36 @@ import { Line } from "./index";
 const meta: Meta<typeof Line> = {
   title: "Line",
   component: Line,
+  argTypes: {
+    leftTitle: { control: "text" },
+    leftSubtitle: { control: "text" },
+    rightTitle: { control: "text" },
+    rightSubtitle: { control: "text" },
+    period: { control: "radio", options: ["month", "weekday", "day", null] },
+    points: { control: "array" },
+    lineColor: { control: "color" },
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof Line>;
 
+const randomPoints = (length: number) => {
+  const points = [];
+  for (let i = 0; i < length; i++) {
+    points.push(Math.round(Math.random() * 50));
+  }
+  return points;
+};
+
 export const Base: Story = {
   args: {
-    title: "Line",
-    subtitle: "Last 30 Days",
-    total: "124 hrs 48 mins",
-    points: [32, 56, 9, 27, 22, 55, 2],
+    leftTitle: "Line",
+    leftSubtitle: "Last 30 Days",
+    rightTitle: "124 hrs 48 mins",
+    rightSubtitle: "since last week",
+    period: "month",
+    points: randomPoints(3),
+    lineColor: "#000000",
   },
 };
diff --git a/lib/@dsvgui/components/line/index.tsx b/lib/@dsvgui/components/line/index.tsx
@@ -1,15 +1,28 @@
 import { Document } from "@/lib/@dsvgui";
-import { getTextWidth } from "@/lib/@dsvgui/utils/index";
+import { getTextWidth, hexToRgb } from "@/lib/@dsvgui/utils/index";
 
 type ILine = {
-  title: string;
-  subtitle: string;
-  total: string;
+  leftTitle: string;
+  leftSubtitle: string;
+  rightTitle: string;
+  rightSubtitle: string;
   points: Array<number>;
+  period?: "month" | "weekday" | "day" | null;
+  lineColor: string;
 };
 
-export const Line: React.FC<ILine> = ({ title, subtitle, total, points }) => {
+export const Line: React.FC<ILine> = ({
+  leftTitle,
+  leftSubtitle,
+  rightTitle,
+  rightSubtitle,
+  points,
+  period,
+  lineColor = "#000000",
+}) => {
   const documentPadding = 40;
+  const today = Date.now();
+  const pointGap = 30;
 
   function createDynamicSvgPath({
     lineHeight,
@@ -21,45 +34,88 @@ export const Line: React.FC<ILine> = ({ title, subtitle, total, points }) => {
     ratio: number;
   }): string {
     const maxValue = Math.max(...points);
-    const xGap = lineWidth / points.length;
-    let x = 0;
+    const xGap = lineWidth / (points.length - 1);
+    let x = -xGap;
     let path =
       "M " +
-      x +
+      (x + xGap) +
       " " +
-      (lineHeight +
-        documentPadding / 2 -
-        5 -
+      (lineHeight -
+        (period ? 7 : -5) -
         (points[0] / maxValue) * lineHeight * ratio);
-    for (let i = 0; i <= points.length; i++) {
+
+    for (const point of points) {
       x += xGap;
       path +=
         " L " +
         x +
         " " +
-        (lineHeight +
-          documentPadding / 2 -
-          5 -
-          (points[i] / maxValue) * lineHeight * ratio);
+        (lineHeight -
+          (period ? 7 : -5) -
+          (point / maxValue) * lineHeight * ratio);
     }
 
     return path;
   }
 
-  const titleWidth = getTextWidth(title, { fontSize: 16 });
-  const subtitleWidth = getTextWidth(subtitle, { fontSize: 16 });
+  const leftTitleWidth = getTextWidth(leftTitle, { fontSize: 22, ratio: 0.58 });
+  const leftSubtitleWidth = getTextWidth(leftSubtitle, {
+    fontSize: 16,
+    ratio: 0.57,
+  });
+  const leftTitlesWidth = Math.max(leftTitleWidth, leftSubtitleWidth);
 
-  const titlesWidth = Math.max(titleWidth, subtitleWidth);
+  const rightTitleWidth = getTextWidth(rightTitle, {
+    fontSize: 22,
+    ratio: 0.58,
+  });
+  const rightSubtitleWidth = getTextWidth(rightSubtitle, {
+    fontSize: 16,
+    ratio: 0.527,
+  });
+  const rightTitlesWidth = Math.max(rightTitleWidth, rightSubtitleWidth);
 
-  const totalTextWidth = titlesWidth + getTextWidth(total, { fontSize: 24 });
-  const height = 90;
-  const width = totalTextWidth + 100;
+  const totalTextWidth = leftTitlesWidth + rightTitlesWidth + 50;
+  const height = 140;
+  const totalPointWidth =
+    points.length * pointGap < 100 ? 100 : points.length * pointGap;
+  const width =
+    totalPointWidth > totalTextWidth ? totalPointWidth : totalTextWidth;
   const pathValue = createDynamicSvgPath({
     lineHeight: height,
     lineWidth: width,
-    ratio: 0.7,
+    ratio: 0.6,
   });
 
+  let labels: Array<JSX.Element> = [];
+  if (period) {
+    labels = points.map((_, i) => {
+      const dateGap = {
+        month: 30,
+        weekday: 1,
+        day: 1,
+      };
+      const nthDay = points.length - i - 1;
+      const date = new Date(
+        today - nthDay * dateGap[period] * 24 * 60 * 60 * 1000
+      );
+
+      let dateOptions = {};
+      if (period === "month") dateOptions = { month: "short" };
+      if (period === "weekday") dateOptions = { weekday: "short" };
+      if (period === "day") dateOptions = { day: "numeric" };
+
+      const periodLabel = date.toLocaleDateString("en-US", dateOptions);
+      const xGap = width / (points.length - 1);
+      const x = i * xGap - getTextWidth(periodLabel, { fontSize: 8 }) / 2;
+      return (
+        <text key={i} className="clabel">
+          <tspan x={x}>{periodLabel}</tspan>
+        </text>
+      );
+    });
+  }
+
   return (
     <Document w={width} h={height} padding={documentPadding}>
       <path
@@ -69,58 +125,93 @@ export const Line: React.FC<ILine> = ({ title, subtitle, total, points }) => {
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-      <text
-        xmlSpace="preserve"
-        fontFamily="Roboto"
-        className="title"
-        fontWeight="bolder"
-        letterSpacing="0.5px"
-      >
-        <tspan x="0" y="15">
-          {title}
-        </tspan>
-      </text>
-      <text
-        fill="#555555"
-        xmlSpace="preserve"
-        fontFamily="Roboto"
-        className="subtitle"
-        fontWeight={500}
-      >
-        <tspan x="0" y="33">
-          {subtitle}
-        </tspan>
-      </text>
-      <text
-        fill="black"
-        xmlSpace="preserve"
-        fontFamily="Roboto"
-        className="title"
-        fontWeight="bolder"
-      >
-        <tspan
-          x={width - getTextWidth(total, { fontSize: 22, ratio: 0.52 })}
-          y="15"
+      <g id="left">
+        <text
+          xmlSpace="preserve"
+          fontFamily="Roboto"
+          className="title"
+          fontWeight="bolder"
+          letterSpacing="0.5px"
+        >
+          <tspan x="0" y="15">
+            {leftTitle}
+          </tspan>
+        </text>
+        <text
+          fill="#555555"
+          xmlSpace="preserve"
+          fontFamily="Roboto"
+          className="subtitle"
+          fontWeight={500}
         >
-          {total}
-        </tspan>
-      </text>
+          <tspan x="0" y="33">
+            {leftSubtitle}
+          </tspan>
+        </text>
+      </g>
+      <g id="right">
+        <text className="title lineText" fontWeight="bolder">
+          <tspan
+            x={width - getTextWidth(rightTitle, { fontSize: 22, ratio: 0.5 })}
+            y="15"
+          >
+            {rightTitle}
+          </tspan>
+        </text>
+        <text className="subtitle lineText" fontWeight={300}>
+          <tspan
+            x={
+              width - getTextWidth(rightSubtitle, { fontSize: 16, ratio: 0.46 })
+            }
+            y="33"
+          >
+            {rightSubtitle}
+          </tspan>
+        </text>
+      </g>
+      {period && (
+        <g id="Labels" transform={`translate(0 ${height + 7})`}>
+          {labels}
+        </g>
+      )}
       <defs>
+        <style>{`
+          .clabel{ fill: #999; font-size: 8px; }
+          .lineText{ fill: ${lineColor} !important; }
+        `}</style>
         <linearGradient
+          x1="0"
+          y1={height}
+          x2={width}
+          y2={height}
           id="paint0_linear_135_79"
-          x1="317"
-          y1="38.6358"
-          x2="29.4084"
-          y2="155.088"
           gradientUnits="userSpaceOnUse"
         >
           <stop offset="0" stopColor="#ffffff" />
-          <stop offset="0.141455" stopColor="#FF12E7" />
-          <stop offset="0.201455" stopColor="#FF5ecc" />
-          <stop offset="0.363128" stopColor="#FF9eeE" />
-          <stop offset="0.581288" stopColor="#FF0AAC" />
-          <stop offset="0.729526" stopColor="#FF046E" />
-          <stop offset="0.943128" stopColor="#FF9eeE" />
+          <stop
+            offset="0.141455"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.7).join(", ")})`}
+          />
+          <stop
+            offset="0.201455"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.3).join(", ")})`}
+          />
+          <stop
+            offset="0.363128"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.5).join(", ")})`}
+          />
+          <stop
+            offset="0.581288"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.7).join(", ")})`}
+          />
+          <stop
+            offset="0.729526"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.8).join(", ")})`}
+          />
+          <stop
+            offset="0.923128"
+            stopColor={`rgba(${hexToRgb(lineColor, 0.7).join(", ")})`}
+          />
           <stop offset="1" stopColor="#ffffff" />
         </linearGradient>
       </defs>
diff --git a/lib/@dsvgui/utils/index.ts b/lib/@dsvgui/utils/index.ts
@@ -83,6 +83,15 @@ export const convertDateToReadableFormat: IConvertDateToReadbleFormat = (
   return `${month} ${day} '${year}`;
 };
 
+export function hexToRgb(hex: string, alpha = 1) {
+  const bigint = parseInt(hex.slice(1), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return [r, g, b, alpha];
+}
+
 export function stringToColorCode(str: string) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -94,18 +103,9 @@ export function stringToColorCode(str: string) {
 }
 
 export function generateColorVariations(inputColor: string, step: number = 5) {
-  function hexToRgb(hex: string) {
-    const bigint = parseInt(hex.slice(1), 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-
-    return [r, g, b];
-  }
-
   const variations: Array<string> = [];
   for (let i = 0; i <= step; i++) {
-    const rgb = hexToRgb(inputColor);
+    const rgb = hexToRgb(inputColor, 1);
     const alpha = i * (1 / step);
     variations.push(`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha || 0.05})`);
   }
