v6.6.3

Author: novykh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "6.6.2",
+  "version": "6.6.3",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/drawer/compare/customPeriodForm.js

@@ -1,25 +1,35 @@
 import React, { useState } from "react"
 import { Flex, TextSmall, TextMicro, Button } from "@netdata/netdata-ui"
 
-const CustomPeriodForm = ({ onAdd, onCancel }) => {
-  const [label, setLabel] = useState("")
-  const [offsetDays, setOffsetDays] = useState("")
-  const [offsetHours, setOffsetHours] = useState("")
+const normalizeInitialValues = initialValues => {
+  const { label = "", offsetSeconds = 0 } = initialValues || {}
 
-  const generateLabel = (days, hours) => {
-    const rtf = new Intl.RelativeTimeFormat("en", { numeric: "always" })
+  const days = Math.floor(offsetSeconds / (24 * 60 * 60))
+  const hours = Math.floor((offsetSeconds % (24 * 60 * 60)) / (60 * 60))
+  return { label, days: days ? days.toString() : "", hours: hours ? hours.toString() : "" }
+}
 
-    if (days > 0 && hours === 0) {
-      return rtf.format(-days, "day")
-    }
-    if (hours > 0 && days === 0) {
-      return rtf.format(-hours, "hour")
-    }
-    if (days > 0 && hours > 0) {
-      return rtf.format(-days, "day")
-    }
-    return ""
+const generateLabel = (days, hours) => {
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "always" })
+
+  if (days > 0 && hours === 0) {
+    return rtf.format(-days, "day")
   }
+  if (hours > 0 && days === 0) {
+    return rtf.format(-hours, "hour")
+  }
+  if (days > 0 && hours > 0) {
+    return `${rtf.format(-days, "day")} and ${rtf.format(-hours, "hour")}`
+  }
+  return ""
+}
+
+const CustomPeriodForm = ({ onSubmit, onCancel, initialValues }) => {
+  const normalizedValues = normalizeInitialValues(initialValues)
+
+  const [label, setLabel] = useState(normalizedValues.label)
+  const [offsetDays, setOffsetDays] = useState(normalizedValues.days)
+  const [offsetHours, setOffsetHours] = useState(normalizedValues.hours)
 
   const handleAdd = () => {
     const days = parseInt(offsetDays) || 0
@@ -32,12 +42,12 @@ const CustomPeriodForm = ({ onAdd, onCancel }) => {
     if (!finalLabel) return
 
     const customPeriod = {
-      id: `custom_${Date.now()}`,
+      id: initialValues.id || `custom_${Date.now()}`,
       label: finalLabel,
       offsetSeconds,
     }
 
-    onAdd(customPeriod)
+    onSubmit(customPeriod)
   }
 
   return (
@@ -103,7 +113,7 @@ const CustomPeriodForm = ({ onAdd, onCancel }) => {
       </Flex>
 
       <Flex gap={2}>
-        <Button tiny label="Add" onClick={handleAdd} />
+        <Button tiny label={initialValues ? "Update" : "Add"} onClick={handleAdd} />
         <Button tiny label="Cancel" onClick={onCancel} />
       </Flex>
     </Flex>

src/components/drawer/compare/index.js

@@ -2,8 +2,10 @@ import React, { useState } from "react"
 import { Flex, TextSmall, TextMicro, Button } from "@netdata/netdata-ui"
 import styled from "styled-components"
 import Tooltip from "@/components/tooltip"
+import Icon, { Button as IconButton } from "@/components/icon"
 import useData from "./useData"
 import { useChart, convert, useAttributeValue } from "@/components/provider"
+import pencilIcon from "@netdata/netdata-ui/dist/components/icon/assets/pencil_outline.svg"
 import ChangeIndicator from "./changeIndicator"
 import CustomPeriodForm from "./customPeriodForm"
 
@@ -60,19 +62,44 @@ const ComparisonCard = ({ period, showAdvanced, tab }) => {
   const dateRange = formatDateRange(chart, period.after, period.before)
   const hasData = period.payload && period.stats && !period.error
 
+  const [showEditForm, setShowEditForm] = useState(false)
+
+  const updatePeriod = updated => {
+    const currentCustomPeriods = chart.getAttribute("customPeriods", [])
+
+    const updatedPeriods = currentCustomPeriods.map(p => (p.id === updated.id ? updated : p))
+    chart.updateAttribute("customPeriods", updatedPeriods)
+    setShowEditForm(false)
+  }
+
   return (
     <Flex column gap={2} padding={[3]} border="all" round>
-      <Flex column gap={1}>
-        <TextSmall strong>{period.label}</TextSmall>
-        <TextMicro color="textDescription">{dateRange}</TextMicro>
-      </Flex>
+      <Tooltip content={dateRange}>
+        <Flex alignItems="center" gap={1} justifyContent="between">
+          <TextSmall strong>{period.label}</TextSmall>
+          {!period.isBase && (
+            <IconButton
+              icon={<Icon svg={pencilIcon} size="10px" />}
+              onClick={() => setShowEditForm(true)}
+              data-testid="period-edit"
+              data-track={chart.track("period-edit")}
+            />
+          )}
+        </Flex>
+      </Tooltip>
 
       {!hasData ? (
         <Flex column gap={1}>
           <TextMicro color="textDescription">
             {period.error ? "Error loading data" : "No data available for the selected time range"}
           </TextMicro>
         </Flex>
+      ) : showEditForm ? (
+        <CustomPeriodForm
+          initialValues={period}
+          onSubmit={updatePeriod}
+          onCancel={() => setShowEditForm(false)}
+        />
       ) : (
         <Flex column gap={1}>
           {basicStats.map(stat => (
@@ -133,7 +160,7 @@ const Compare = () => {
           <ComparisonCard key={period.id} period={period} showAdvanced={showAllStats} tab={tab} />
         ))}
 
-        {periods.length > 0 && !showCustomForm && (
+        {!showCustomForm ? (
           <Flex
             column
             gap={2}
@@ -149,10 +176,8 @@ const Compare = () => {
               <Button tiny label="Select a timeframe" onClick={() => setShowCustomForm(true)} />
             </Tooltip>
           </Flex>
-        )}
-
-        {showCustomForm && (
-          <CustomPeriodForm onAdd={addCustomPeriod} onCancel={() => setShowCustomForm(false)} />
+        ) : (
+          <CustomPeriodForm onSubmit={addCustomPeriod} onCancel={() => setShowCustomForm(false)} />
         )}
       </GridContainer>
     </Flex>