feature/COR-1901-rwzi-municipal-pages (#4977)

* feat(COR-1901): Change RWZI line visually * feat(COR-1901): Add opacity parameter to timeSeries linechart and gappedlinechart * feat(COR-1901): Add opacity to legend items too
minvws · Feb 7, 2024 · fda6a8f · fda6a8f
1 parent 577293c
commit fda6a8f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/app/src/components/time-series-chart/components/line-trend.tsx b/packages/app/src/components/time-series-chart/components/line-trend.tsx
@@ -63,12 +63,13 @@ export function LineTrend({ series, style = DEFAULT_STYLE, strokeWidth = DEFAULT
 interface LineTrendIconProps {
   color: string;
   style?: 'solid' | 'dashed';
+  opacity?: number;
   strokeWidth?: number;
   width?: number;
   height?: number;
 }
 
-export function LineTrendIcon({ color, strokeWidth = DEFAULT_STROKE_WIDTH, style = DEFAULT_STYLE, width = 15, height = 15 }: LineTrendIconProps) {
+export function LineTrendIcon({ color, strokeWidth = DEFAULT_STROKE_WIDTH, style = DEFAULT_STYLE, opacity, width = 15, height = 15 }: LineTrendIconProps) {
   return (
     <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
       <line
@@ -77,6 +78,7 @@ export function LineTrendIcon({ color, strokeWidth = DEFAULT_STROKE_WIDTH, style
         strokeDasharray={style === 'dashed' ? 4 : undefined}
         strokeLinecap="round"
         strokeLinejoin="round"
+        opacity={opacity}
         x1={2}
         y1={height / 2}
         x2={width - 2}

diff --git a/packages/app/src/components/time-series-chart/components/series-icon.tsx b/packages/app/src/components/time-series-chart/components/series-icon.tsx
@@ -25,7 +25,7 @@ export function SeriesIcon<T extends TimestampedValue>({ config, value }: Series
   switch (config.type) {
     case 'line':
     case 'gapped-line':
-      return <LineTrendIcon color={config.color} strokeWidth={config.strokeWidth} style={config.style} />;
+      return <LineTrendIcon color={config.color} strokeWidth={config.strokeWidth} style={config.style} opacity={config.opacity} />;
     case 'scatter-plot':
       return <ScatterPlotIcon color={config.color} />;
     case 'range':