@cdc/chart 4.26.1 → 4.26.2

package/src/_stories/_mock/line_chart_angle_q3_steep_downward.json

@@ -0,0 +1,195 @@
+{
+  "type": "chart",
+  "title": "Quadrant 3: Steep Downward (180°-269°)",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "always show",
+  "visualizationSubType": "regular",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "0",
+    "max": "120",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "label": "Value"
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "height": "450",
+  "xAxis": {
+    "sortDates": false,
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "0",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "padding": 5,
+    "dataKey": "Category",
+    "label": "Data Points"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "Testing steep downward angles (Q3: 180°-269°)",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "download": true,
+    "showVertical": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "Steep downward angle line",
+    "label": "Series",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "shape": "circle",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "hasShape": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative4",
+  "isPaletteReversed": false,
+  "labels": true,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "standard"
+  },
+  "data": [
+    {
+      "Category": "A",
+      "Steep Downward (Q3)": "100"
+    },
+    {
+      "Category": "B",
+      "Steep Downward (Q3)": "90"
+    },
+    {
+      "Category": "C",
+      "Steep Downward (Q3)": "10"
+    },
+    {
+      "Category": "D",
+      "Steep Downward (Q3)": "0"
+    },
+    {
+      "Category": "E",
+      "Steep Downward (Q3)": "10"
+    },
+    {
+      "Category": "F",
+      "Steep Downward (Q3)": "100"
+    },
+    {
+      "Category": "G",
+      "Steep Downward (Q3)": "80"
+    },
+    {
+      "Category": "H",
+      "Steep Downward (Q3)": "90"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Steep Downward (Q3)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "description": "Testing Quadrant 3 angles (180°-269°) - steep downward slopes where labels should be positioned to avoid line overlap.",
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "lineDatapointColor": "Same as Line",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "useIntelligentLineChartLabels": true
+  },
+  "isLegendValue": false,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 450,
+    "horizontal": 750
+  },
+  "columns": {},
+  "brush": {
+    "height": 45,
+    "active": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "version": "4.25.1"
+}

package/src/_stories/_mock/line_chart_angle_q4_gentle_upward.json

@@ -0,0 +1,195 @@
+{
+  "type": "chart",
+  "title": "Quadrant 4: Gentle Upward (269°-360°)",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "always show",
+  "visualizationSubType": "regular",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "0",
+    "max": "120",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "label": "Value"
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "height": "450",
+  "xAxis": {
+    "sortDates": false,
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "0",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "padding": 5,
+    "dataKey": "Category",
+    "label": "Data Points"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "Testing gentle upward angles (Q4: 269°-360°)",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "download": true,
+    "showVertical": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "Gentle upward angle line",
+    "label": "Series",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "shape": "circle",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "hasShape": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative4",
+  "isPaletteReversed": false,
+  "labels": true,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "standard"
+  },
+  "data": [
+    {
+      "Category": "A",
+      "Gentle Upward (Q4)": "10"
+    },
+    {
+      "Category": "B",
+      "Gentle Upward (Q4)": "20"
+    },
+    {
+      "Category": "C",
+      "Gentle Upward (Q4)": "80"
+    },
+    {
+      "Category": "D",
+      "Gentle Upward (Q4)": "90"
+    },
+    {
+      "Category": "E",
+      "Gentle Upward (Q4)": "100"
+    },
+    {
+      "Category": "F",
+      "Gentle Upward (Q4)": "80"
+    },
+    {
+      "Category": "G",
+      "Gentle Upward (Q4)": "20"
+    },
+    {
+      "Category": "H",
+      "Gentle Upward (Q4)": "90"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Gentle Upward (Q4)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "description": "Testing Quadrant 4 angles (269°-360°) - gentle upward slopes where labels should be positioned to avoid line overlap.",
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "lineDatapointColor": "Same as Line",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "useIntelligentLineChartLabels": true
+  },
+  "isLegendValue": false,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 450,
+    "horizontal": 750
+  },
+  "columns": {},
+  "brush": {
+    "height": 45,
+    "active": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "version": "4.25.1"
+}

package/src/_stories/_mock/line_chart_quadrant_angles.json

@@ -0,0 +1,264 @@
+{
+  "type": "chart",
+  "title": "Line Chart - Quadrant Angle Testing",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "always show",
+  "visualizationSubType": "regular",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "0",
+    "max": "120",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "label": "Value"
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "height": "450",
+  "xAxis": {
+    "sortDates": false,
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "0",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "padding": 5,
+    "dataKey": "Category",
+    "label": "Data Points"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "Data for testing quadrant angle positioning",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "download": true,
+    "showVertical": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "Different series to test various angle scenarios",
+    "label": "Test Series",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "shape": "circle",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "hasShape": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative4",
+  "isPaletteReversed": false,
+  "labels": true,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "standard"
+  },
+  "data": [
+    {
+      "Category": "A",
+      "Steep Upward (Q1)": "10",
+      "Gentle Downward (Q2)": "100",
+      "Steep Downward (Q3)": "100",
+      "Gentle Upward (Q4)": "10",
+      "Near Zero Rise": "5",
+      "Near Zero Fall": "5"
+    },
+    {
+      "Category": "B",
+      "Steep Upward (Q1)": "90",
+      "Gentle Downward (Q2)": "80",
+      "Steep Downward (Q3)": "90",
+      "Gentle Upward (Q4)": "20",
+      "Near Zero Rise": "10",
+      "Near Zero Fall": "0"
+    },
+    {
+      "Category": "C",
+      "Steep Upward (Q1)": "100",
+      "Gentle Downward (Q2)": "90",
+      "Steep Downward (Q3)": "10",
+      "Gentle Upward (Q4)": "80",
+      "Near Zero Rise": "80",
+      "Near Zero Fall": "80"
+    },
+    {
+      "Category": "D",
+      "Steep Upward (Q1)": "80",
+      "Gentle Downward (Q2)": "100",
+      "Steep Downward (Q3)": "0",
+      "Gentle Upward (Q4)": "90",
+      "Near Zero Rise": "90",
+      "Near Zero Fall": "90"
+    },
+    {
+      "Category": "E",
+      "Steep Upward (Q1)": "20",
+      "Gentle Downward (Q2)": "90",
+      "Steep Downward (Q3)": "10",
+      "Gentle Upward (Q4)": "100",
+      "Near Zero Rise": "0",
+      "Near Zero Fall": "100"
+    },
+    {
+      "Category": "F",
+      "Steep Upward (Q1)": "100",
+      "Gentle Downward (Q2)": "10",
+      "Steep Downward (Q3)": "100",
+      "Gentle Upward (Q4)": "80",
+      "Near Zero Rise": "5",
+      "Near Zero Fall": "10"
+    },
+    {
+      "Category": "G",
+      "Steep Upward (Q1)": "90",
+      "Gentle Downward (Q2)": "80",
+      "Steep Downward (Q3)": "80",
+      "Gentle Upward (Q4)": "20",
+      "Near Zero Rise": "100",
+      "Near Zero Fall": "5"
+    },
+    {
+      "Category": "H",
+      "Steep Upward (Q1)": "10",
+      "Gentle Downward (Q2)": "100",
+      "Steep Downward (Q3)": "90",
+      "Gentle Upward (Q4)": "90",
+      "Near Zero Rise": "10",
+      "Near Zero Fall": "0"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Steep Upward (Q1)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Gentle Downward (Q2)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Steep Downward (Q3)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Gentle Upward (Q4)",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Near Zero Rise",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Near Zero Fall",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "description": "This chart contains multiple line series designed to create various angles for testing quadrant-based label positioning. Each series demonstrates different angle scenarios: Quadrant 1 (1°-89° steep upward), Quadrant 2 (91°-179° gentle downward), Quadrant 3 (180°-269° steep downward), Quadrant 4 (269°-360° gentle upward), and edge cases near the x-axis.",
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "lineDatapointColor": "Same as Line",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true
+  },
+  "isLegendValue": false,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 450,
+    "horizontal": 750
+  },
+  "columns": {},
+  "brush": {
+    "height": 45,
+    "active": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "version": "4.25.1"
+}

package/src/components/Annotations/components/AnnotationDraggable.styles.css

@@ -1,10 +1,11 @@
-.cdc-open-viz-module .annotation__desktop-label {
-  display: none;
+.cdc-open-viz-module.type-chart .annotation__desktop-label {
+  line-height: 1.1rem;
+  font-size: 16px;
 }
 
-.cdc-open-viz-module {
+.cdc-open-viz-module.type-chart {
   .annotation__mobile-label-circle {
-    stroke-width: 2;
+    stroke-width: 1;
   }
 
   .annotation__has-dropdown-number {
@@ -12,20 +13,13 @@
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    padding: 8px;
-    width: 16px;
-    height: 16px;
-    border: 2px solid #666;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    border: 1px solid #666;
     text-align: center;
     font-size: 14px;
-  }
-}
-
-@container content (min-width: 700px) {
-  .cdc-open-viz-module .annotation__mobile-label {
-    display: none;
-  }
-  .cdc-open-viz-module .annotation__desktop-label {
-    display: block;
+    box-sizing: border-box;
   }
 }