refactor: updated view function of wakatime:getTimeWithRange

lib/@dsvgui/components/fallback/index.tsx

@@ -13,7 +13,7 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
 
   const subtitle = wrapText(
     message,
-    { maxLineWidth: width - 50, fontSize: 14 },
+    { maxLineWidth: width - 60, fontSize: 14, fontWeight: 400 },
     (line, index) => (
       <tspan key={index} x="67" y={index * 16 + 40}>
         {line}

lib/@dsvgui/components/line/index.tsx

@@ -1,7 +1,7 @@
 import { Document } from "@/lib/@dsvgui";
 import { getTextWidth, hexToRgb } from "@/lib/@dsvgui/utils/index";
 
-type ILineItem = {
+export type ILineItem = {
   leftTitle?: string;
   leftSubtitle?: string;
   rightTitle?: string;

platforms/wakatime/view/index.tsx

@@ -1,6 +1,6 @@
 import { ViewComponent } from "@/platforms/types";
 import { SiWakatime } from "react-icons/si";
-import { Metrics, Line, BarStats, IBarStats } from "@/lib/@dsvgui";
+import { Metrics, Line, BarStats, IBarStats, ILineItem } from "@/lib/@dsvgui";
 
 export const getAllTimeSinceToday: ViewComponent = (result, config) => {
   return (
@@ -12,15 +12,21 @@ export const getAllTimeSinceToday: ViewComponent = (result, config) => {
 };
 
 export const getTimeWithRange: ViewComponent = (result, config) => {
-  const subtitle = (config.queryConfig as any).range;
+  const { viewConfig, queryConfig } = config as any;
   const points = result.data.map((day: any) => day.grand_total.total_seconds);
 
   const lines = [
     {
-      leftTitle: "Line",
-      leftSubtitle: subtitle,
-      points,
+      leftTitle: "WakaTime",
+      leftSubtitle: "from pulses",
       rightTitle: result.cumulative_total.text,
+      rightSubtitle: queryConfig.range,
+      points,
+      period:
+        viewConfig.showPeriod === false
+          ? undefined
+          : ("day" as ILineItem["period"]),
+      lineColor: viewConfig.lineColor,
     },
   ];
   return <Line items={lines} />;

platforms/wakatime/view/validations.ts

@@ -1,8 +1,21 @@
-import { object, number, string } from "yup";
+import { object, number, string, boolean } from "yup";
 
 export const getAllTimeSinceToday = object().required().noUnknown(true);
 
-export const getTimeWithRange = object().required().noUnknown(true);
+export const getTimeWithRange = object({
+  lineColor: string().required().default("#000000").meta({
+    label: "Line Color",
+    placeholder: "Line Color",
+    description: "The color of the line.",
+  }),
+  showPeriod: boolean().required().meta({
+    label: "Show Period",
+    placeholder: "Show Period",
+    description: "Whether to show the period or not.",
+  }),
+})
+  .required()
+  .noUnknown(true);
 
 export const getMostUsedLanguages = object({
   language_count: number().min(1).max(10).default(6).required().meta({