[FEATURE] TimeSeriesChart: support opacity & line style overrides (#386)

* Move query settings to a dedicated tab

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* Add area opacity to query settings

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* Add line style to query settings

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* make colorMode and colorValue optional

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* add add/remove buttons for each option

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* Gather in a common "+" button

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* factorize the section logic

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* misc

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* review comments

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* ignore npmjs.com links validation

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

---------

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

Author: AntoineThebaud

.mdox.validate.yaml

@@ -6,4 +6,7 @@ validators:
   - regex: 'github\.com'
     type: 'ignore'
   - regex: 'perses\.dev'
+    type: 'ignore'
+  # getting 403 forbidden in the CI
+  - regex: 'npmjs\.com'
     type: 'ignore'

timeserieschart/schemas/time-series.cue

@@ -38,8 +38,8 @@ spec: close({
 #visual: {
 	display?:      "line" | "bar"
 	lineWidth?:    number & >=0.25 & <=3
-	lineStyle?:    "solid" | "dashed" | "dotted"
-	areaOpacity?:  number & >=0 & <=1
+	lineStyle?:    #lineStyle
+	areaOpacity?:  #areaOpacity
 	showPoints?:   "auto" | "always"
 	palette?:      #palette
 	pointRadius?:  number & >=0 & <=6
@@ -59,7 +59,12 @@ spec: close({
 }
 
 #querySettings: [...{
-	queryIndex: int & >=0
-	colorMode:  "fixed" | "fixed-single"       // NB: "palette" could be added later
-	colorValue: =~"^#(?:[0-9a-fA-F]{3}){1,2}$" // hexadecimal color code
+	queryIndex:    int & >=0
+	colorMode?:    "fixed" | "fixed-single"       // NB: "palette" could be added later
+	colorValue?:   =~"^#(?:[0-9a-fA-F]{3}){1,2}$" // hexadecimal color code
+	lineStyle?:    #lineStyle
+	areaOpacity?:  #areaOpacity
 }]
+
+#lineStyle:   "solid" | "dashed" | "dotted"
+#areaOpacity: number & >=0 & <=1 // transparency level from 0 (transparent) to 1 (opaque)

…TimeSeriesChartOptionsEditorSettings.tsx …erieschart/src/GeneralSettingsEditor.tsxtimeserieschart/src/TimeSeriesChartOptionsEditorSettings.tsx renamed to timeserieschart/src/GeneralSettingsEditor.tsx timeserieschart/src/TimeSeriesChartOptionsEditorSettings.tsx renamed to timeserieschart/src/GeneralSettingsEditor.tsx

@@ -30,9 +30,8 @@ import {
 } from './time-series-chart-model';
 import { VisualOptionsEditor, VisualOptionsEditorProps } from './VisualOptionsEditor';
 import { YAxisOptionsEditor, YAxisOptionsEditorProps } from './YAxisOptionsEditor';
-import { QuerySettingsEditor, QuerySettingsEditorProps } from './QuerySettingsEditor';
 
-export function TimeSeriesChartOptionsEditorSettings(props: TimeSeriesChartOptionsEditorProps): ReactElement {
+export function TimeSeriesChartGeneralSettings(props: TimeSeriesChartOptionsEditorProps): ReactElement {
   const { onChange, value } = props;
 
   const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {
@@ -60,14 +59,6 @@ export function TimeSeriesChartOptionsEditorSettings(props: TimeSeriesChartOptio
     );
   };
 
-  const handleQuerySettingsChange: QuerySettingsEditorProps['onChange'] = (newQuerySettings) => {
-    onChange(
-      produce(value, (draft: TimeSeriesChartOptions) => {
-        draft.querySettings = newQuerySettings;
-      })
-    );
-  };
-
   const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {
     onChange(
       produce(value, (draft: TimeSeriesChartOptions) => {
@@ -87,20 +78,18 @@ export function TimeSeriesChartOptionsEditorSettings(props: TimeSeriesChartOptio
       </OptionsEditorColumn>
       <OptionsEditorColumn>
         <ThresholdsEditor hideDefault thresholds={value.thresholds} onChange={handleThresholdsChange} />
-        <QuerySettingsEditor querySettingsList={value.querySettings} onChange={handleQuerySettingsChange} />
         <OptionsEditorGroup title="Reset Settings">
           <Button
             variant="outlined"
             color="secondary"
             onClick={() => {
               onChange(
                 produce(value, (draft: TimeSeriesChartOptions) => {
-                  // reset button removes all optional panel options
+                  // reset button removes all general panel options
                   draft.yAxis = undefined;
                   draft.legend = undefined;
                   draft.visual = undefined;
                   draft.thresholds = undefined;
-                  draft.querySettings = undefined;
                 })
               );
             }}