@cdc/chart 4.24.9-1 → 4.24.10

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import CdcChart from './CdcChart'
+import './coreStyles_chart.scss'
 
 import 'react-tooltip/dist/react-tooltip.css'
 

package/src/scss/DataTable.scss

@@ -1,7 +1,8 @@
-@include breakpointClass(md) {
-  .data-table-container {
-    margin: 5px 0em;
-    width: 100%;
+.data-table-container {
+  margin: 20px 0 0;
+  width: 100%;
+  &.download-link-above {
+    margin: 0;
   }
 }
 

package/src/scss/main.scss

@@ -1,6 +1,50 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/themes/color-definitions';
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $class == md {
+    @media (min-width: 960px) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media (min-width: 1300px) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}
+
+@mixin breakpointClass($class) {
+  @if $class == xs {
+    &.xs,
+    &.xxs {
+      @content;
+    }
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == md {
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == lg {
+    &.lg {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
+  }
+}
 
 .form-container {
   overflow-y: auto;
@@ -129,11 +173,12 @@
     padding: 15px;
     vertical-align: top;
     text-align: left;
-    border: 1px solid $lightGray;
+    border: 1px solid var(--lightGray);
     position: relative;
 
     &.no-border {
       border: 1px solid transparent;
+      padding: 0;
     }
 
     &__inner {
@@ -147,7 +192,7 @@
       &.vertical-sorted {
         display: block;
 
-        @include breakpoint(md) {
+        @include breakpoint(sm) {
           column-count: 2;
           column-width: 100%;
         }
@@ -177,10 +222,6 @@
         white-space: pre-wrap;
         word-break: break-word;
       }
-
-      & > :first-child {
-        margin-top: 3px;
-      }
     }
 
     .vertical-sorted:not(.single-row) .legend-item {
@@ -199,11 +240,11 @@
 
     h3,
     p {
-      margin-bottom: 0.8em;
+      margin-bottom: 0.4em;
     }
 
     & div.legend-item {
-      margin-bottom: 0.5em !important;
+      margin-bottom: 0.2em !important;
 
       &:last-child {
         margin: 0 !important;
@@ -456,46 +497,6 @@
     }
   }
 
-  .filters-section {
-    margin-left: 1rem;
-    margin-right: 1rem;
-
-    &__title {
-      margin: 15px 0;
-    }
-
-    &__wrapper {
-      hr {
-        margin-bottom: 20px;
-      }
-
-      label {
-        display: inherit;
-        margin-bottom: 5px;
-        font-weight: 600;
-        font-size: 16px;
-      }
-    }
-
-    @include breakpoint(md) {
-      display: flex;
-      gap: 30px;
-    }
-
-    label:not(:empty) {
-      margin-right: 0.4em;
-    }
-
-    select {
-      font-size: 1em;
-      padding-right: 5px;
-    }
-
-    .single-filter {
-      margin-bottom: 0.5em;
-    }
-  }
-
   @include breakpointClass(xs) {
     &.font-small {
       font-size: 0.8em;
@@ -522,7 +523,7 @@
     }
   }
 
-  @include breakpointClass(md) {
+  @include breakpointClass(sm) {
     .chart-container {
       .no-wrap {
         flex-wrap: nowrap;
@@ -544,7 +545,11 @@
           margin-left: 0;
         }
       }
+    }
+  }
 
+  @include breakpointClass(md) {
+    .chart-container {
       > svg {
         font-size: 16px;
         width: 75%;

package/src/types/ChartConfig.ts

@@ -10,13 +10,27 @@ import { General } from '@cdc/core/types/General'
 import { type Link } from './../components/Sankey/types'
 import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
 import { Region } from '@cdc/core/types/Region'
-
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
-
+export type ChartOrientation = 'vertical' | 'horizontal'
+export type VisualizationType =
+  | 'Area Chart'
+  | 'Bar'
+  | 'Box Plot'
+  | 'Deviation Bar'
+  | 'Forest Plot'
+  | 'Line'
+  | 'Paired Bar'
+  | 'Pie'
+  | 'Scatter Plot'
+  | 'Spark Line'
+  | 'Combo'
+  | 'Forecasting'
+  | 'Sankey'
+  | 'Bump Chart'
 export interface PreliminaryDataItem {
   column: string
   displayLegend: boolean
@@ -51,6 +65,7 @@ type DataFormat = {
   rightSuffix: string
   roundTo: number
   suffix: string
+  onlyShowTopPrefixSuffix?: boolean
 }
 
 type Exclusions = {
@@ -77,14 +92,14 @@ export type Legend = {
   singleRow: boolean
   type: string
   verticalSorted: boolean
-  hideSuppressionLink:boolean
-  style:'circles'|'boxes'|'gradient'|'lines'
-  subStyle:'linear blocks'|'smooth'
-  hideSuppressedLabels:boolean
-  tickRotation:string
-  hideBorder:{
-    side:boolean
-    topBottom:boolean
+  hideSuppressionLink: boolean
+  style: 'circles' | 'boxes' | 'gradient' | 'lines'
+  subStyle: 'linear blocks' | 'smooth'
+  hideSuppressedLabels: boolean
+  tickRotation: string
+  hideBorder: {
+    side: boolean
+    topBottom: boolean
   }
 }
 
@@ -105,7 +120,7 @@ export type AllChartsConfig = {
   barHasBorder: 'true' | 'false'
   barHeight: number
   barSpace: number
-  barStyle: 'lollipop'|'rounded'|'flat'
+  barStyle: 'lollipop' | 'rounded' | 'flat'
   barThickness: number
   boxplot: BoxPlot
   brush: {
@@ -135,6 +150,7 @@ export type AllChartsConfig = {
   formattedData: Object[] & { urlFiltered: boolean }
   heights: {
     vertical: number
+    horizontal: number
     mobileVertical: number
   }
   highlightedBarValues: { value: any; color: string; borderWidth: number; legendLabel: string }[]
@@ -151,11 +167,12 @@ export type AllChartsConfig = {
   lollipopShape: string
   lollipopSize: 'small' | 'medium' | 'large'
   newViz: Object
-  orientation: 'vertical' | 'horizontal'
+  orientation: ChartOrientation
   palette: string
   pieType?: string
   preliminaryData: PreliminaryDataItem[]
   primary?: DataFormat
+  rankByValue: 'asc' | 'desc'
   roundingStyle: string
   runtime: Runtime
   runtimeDataUrl: string
@@ -180,8 +197,9 @@ export type AllChartsConfig = {
   twoColor: { palette: string }
   type: 'chart' | 'dashboard'
   uid: string | number
+  version: string
   visual: Visual
-  visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting' | 'Sankey' | 'Bump Chart'
+  visualizationType: VisualizationType
   visualizationSubType: string
   xAxis: Axis
   yAxis: Axis
@@ -197,7 +215,12 @@ export type AllChartsConfig = {
     }
     margin: { margin_x: number; margin_y: number }
     nodeColor: { default: boolean; inactive: boolean }
-    opacity: { LinkOpacityInactive: string; LinkOpacityDefault: string; nodeOpacityInactive: boolean; nodeOpacityDefault: boolean }
+    opacity: {
+      LinkOpacityInactive: string
+      LinkOpacityDefault: string
+      nodeOpacityInactive: boolean
+      nodeOpacityDefault: boolean
+    }
     rxValue: number
     nodeFontColor: string
     nodeValueStyle: {
@@ -257,9 +280,8 @@ export type SankeyChartConfig = {
         source: SankeyLink
         target: SankeyLink
         value: number
-      }[],
+      }[]
       storyNodeText: StoryNode[]
-:
     }
   ]
   visualizationType: 'Sankey'

package/src/types/ChartContext.ts

@@ -3,7 +3,7 @@ import { PickD3Scale } from '@visx/scale'
 import { type SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
-
+import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
 export type ColorScale = PickD3Scale<'ordinal', any, any>
 
 export type TransformedData = {
@@ -13,26 +13,30 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
-  // process top level chart aria label for each chart type
-  handleChartAriaLabels: (config: any) => string
+  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
+  capitalize: (value: string) => string
+  clean: Function
   colorScale?: ColorScale
   config: ChartConfig
   currentViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  dashboardConfig?: DashboardConfig
+  // process top level chart aria label for each chart type
+  handleChartAriaLabels: (config: any) => string
+  handleDragStateChange: (isDragging: any) => void
   highlight?: Function
   highlightReset?: Function
-  legendIsolateValues?: string[]
-  setLegendIsolateValues?: Function
-  getTextWidth?: (a: string, b: string) => string
-  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
-  setBrushConfig: Function
-  clean: Function
-  capitalize: (value: string) => string
   // whether or not the legend is appearing below the chart
   isLegendBottom?: boolean
   // whether or not the chart is viewed within the editor screen
   isEditor?: boolean
   // whether or not the user is dragging an annotation
   isDraggingAnnotation?: boolean
+  legendIsolateValues?: string[]
+  legendRef?: React.RefObject<HTMLDivElement>
+  parentRef?: React.RefObject<HTMLDivElement>
+  setBrushConfig: Function
+  setLegendIsolateValues?: Function
+  svgRef?: React.RefObject<SVGSVGElement>
 }
 
 // Line Chart Specific Context
@@ -60,6 +64,7 @@ export type ChartContext =
   | LineChartContext
   | (SharedChartContext & {
       annotations: Annotation[]
+      colorPalettes: any
       dimensions: DimensionsType
       formatDate?: Function
       formatTooltipsDate: Function
@@ -71,11 +76,10 @@ export type ChartContext =
       parseDate?: Function
       rawData?: Object[]
       seriesHighlight?: string[]
-      tableData?: Object[]
-      transformedData?: TransformedData[]
       setSharedFilter?: Function
       sharedFilterValue?: string
-      updateConfig?: Function
-      colorPalettes: any
+      tableData?: Object[]
+      transformedData?: TransformedData[]
       twoColorPalette: any
+      updateConfig?: Function
     })

package/src/_stories/Chart.Legend.Gradient.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import chartGradientConfig from './_mock/legend.gradient_mock.json'
-
-import Chart from '../CdcChart'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Legend',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const Legend_gradient: Story = {
-  args: {
-    config: chartGradientConfig
-  }
-}
-
-export default meta

package/src/_stories/ChartBrush.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import chartBrushConfig from './_mock/brush_mock.json'
-
-import Chart from '../CdcChart'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Brush',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const Area_Brush: Story = {
-  args: {
-    config: chartBrushConfig
-  }
-}
-
-export default meta