Merge pull request #19 from highcharts/main

get final changes before user session

early_explo/examples/menu/barChart.js

@@ -1,7 +1,7 @@
 barChart = Highcharts.chart('bar-container', {
     chart: {
         type: 'bar',
-        height: 400
+        height: 350
     },
     title: {
         text: 'Energy Sources',
@@ -29,7 +29,7 @@ barChart = Highcharts.chart('bar-container', {
     plotOptions: {
         series: {
             stacking: 'normal',
-            pointWidth: 25,
+            pointWidth: 20,
             borderWidth: 2,
             dataLabels: {
                 enabled: true,

early_explo/examples/menu/chart.js

@@ -165,7 +165,18 @@ chart = Highcharts.chart('container', {
                 '{point.weight}.'
         }
     },
+    plotOptions: {
+        series: {
+            allowPointSelect: true,
+            states: {
+                select: {
+                    color: 'MidnightBlue'
+                }
+            }
+        }
+    },
     series: [{
+        // allowPointSelect: true,
         keys: ['from', 'to', 'weight'],
         nodes: sankeyNodes, // patternNodes
         data: sankeyData,

early_explo/examples/menu/datasets.js

@@ -1,3 +1,20 @@
+const descriptions = {
+    "description-sankey": {
+        "minimal":  `Sankey charts are used to visualize data flow and volume between nodes.`,
+        "default": `Sankey charts are used to visualize data flow and volume between nodes. Visually wider lines indicate larger volumes.`,
+        "verbose": `Sankey charts are used to visualize data flow and volume between nodes. Visually wider lines indicate larger volumes. This chart is showing energy consumption and types. Interacting with this chart by selecting a node or flow (such as with a click) will update the stacked bar chart below.`
+    },
+    "description-bar": {
+        "minimal": `Chart showing stacked bars for comparing quantities.`,
+        "default": `Chart showing stacked bars for comparing quantities. Stacked charts are often used to visualize data that accumulates to a sum.`,
+        "verbose": `Chart showing stacked bars for comparing quantities. Stacked charts are often used to visualize data that accumulates to a sum. This chart is showing data from the energy sources, and will stack to demonstrate the proportion of an energy source that is currently selected by the previous Sankey Diagram.`
+    },
+    "description-line": {
+        "minimal": `Line chart for comparing change in data across categories.`,
+        "default": `Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends.`,
+        "verbose": `Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends. This chart is showing energy consumption over time, by type of consumption. Interacting with the legend can help focus or toggle on and off specific categories.`
+    },
+}
 const multipliers = {
     "flat": [
         {

early_explo/examples/menu/lineChart.js

@@ -1,6 +1,6 @@
 lineChart = Highcharts.chart('line-container', {
     chart: {
-        height: 400
+        height: 350
     },
     title: {
         text: 'Monthly Energy Consumption',

early_explo/examples/menu/menu.css

@@ -211,4 +211,10 @@ input:hover {
 .highcharts-visible-alt {
     display: block;
     position: absolute;
+}
+
+.highcharts-description {
+    padding: 10px;
+    padding-top: 0;
+    margin-top: 0;
 }

early_explo/examples/menu/menu.html

@@ -21,30 +21,27 @@
                     <figure class="highcharts-figure">
                         <div id="container"></div>
                         <div id="hidden-container"></div>
-                        <!-- <p class="highcharts-description">
+                        <p id="description-sankey" class="highcharts-description">
                             Sankey charts are used to visualize data flow and volume
                             between nodes. The wider lines indicate larger volumes.
-                        </p> -->
+                        </p>
                     </figure>
                     <div class="highcharts-responsive-two-columns">
                         <div class="highcharts-menu-halfwidth">
                             <figure class="highcharts-figure">
                                 <div id="bar-container"></div>
-                                <!-- <p class="highcharts-description">
+                                <p id="description-bar" class="highcharts-description">
                                     Chart showing stacked columns for comparing quantities. Stacked charts
-                                    are often used to visualize data that accumulates to a sum. This chart
-                                    is showing data labels for each individual section of the stack.
-                                </p> -->
+                                    are often used to visualize data that accumulates to a sum.
+                                </p>
                             </figure>
                         </div>
                         <div class="highcharts-menu-halfwidth">
                             <figure class="highcharts-figure">
                                 <div id="line-container"></div>
-                                <!-- <p class="highcharts-description">
-                                    Chart showing stacked columns for comparing quantities. Stacked charts
-                                    are often used to visualize data that accumulates to a sum. This chart
-                                    is showing data labels for each individual section of the stack.
-                                </p> -->
+                                <p id="description-line" class="highcharts-description">
+                                    Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends.
+                                </p>
                             </figure>
                         </div>
                     </div>

early_explo/examples/menu/menuFunctions.js

@@ -46,6 +46,34 @@ const menuFunctions = {
                     }
                 })
             }
+        },
+        "Description verbosity": {
+            change: option => {},
+            "Chart": {
+                change: option => {
+                    console.log("change chart desc!", option)
+                    //highcharts-description-default
+                    // description-line
+                    let chartlist = ["sankey","bar","line"]
+                    chartlist.forEach(c => {
+                        let chartId = `description-${c}`
+                        let chart = document.getElementById(chartId)
+                        let desc = descriptions[chartId][option]
+                        if (!desc) {
+                            console.log("NO description!")
+                            chart.classList.add("highcharts-menu-hidden")
+                        } else {
+                            chart.classList.remove("highcharts-menu-hidden")
+                            chart.innerText = desc
+                        }
+                    })
+                }
+            },
+            "Region alt text": {
+                change: option => {
+                    console.log("change region desc!", option)
+                }
+            }
         }
     },
     Text: {
@@ -370,10 +398,19 @@ const menuFunctions = {
     "Element size": {
         change: option => {},
         Lines: {
-            change: option => {},
-            Outlines : {
-                change: option => {},
-            }
+            change: option => {
+                console.log("changing lines!")
+                lineChart.update({
+                    plotOptions: {
+                        series: {
+                            lineWidth: menuStateValueMap.lineWidth[option]
+                        }
+                    }
+                })
+            },
+            // Outlines : {
+            //     change: option => {},
+            // }
         }
     },
     Audio: {

early_explo/examples/menu/menuState.js

@@ -11,6 +11,16 @@ let menuState = {
             value: "",
             available: true,
             enabled: false
+        },
+        "Description verbosity": {
+            value: "",
+            available: true,
+            enabled: false,
+            "Chart": {
+                value: "",
+                available: true,
+                enabled: false
+            }
         }
     },
     Text: {
@@ -121,11 +131,11 @@ let menuState = {
             value: "",
             available: true,
             enabled: false,
-            Outlines : {
-                value: "",
-                available: true,
-                enabled: false
-            }
+            // Outlines : {
+            //     value: "",
+            //     available: true,
+            //     enabled: false
+            // }
         }
     },
     Audio: {
@@ -135,21 +145,31 @@ let menuState = {
     },
     Motion: {
         value: "",
-        available: true,
+        available: false,
         enabled: false
     },
     Interactivity: {
         value: "",
-        available: true,
+        available: false,
         enabled: false,
         "Pointer focus": {
             value: "",
-            available: true,
+            available: false,
             enabled: false
         }
     }
 }
 let overrideValues = {
+    "Comprehension": {
+        options: {
+            moderate:  {
+                "Description verbosity": "minimal"
+            },
+            robust:  {
+                "Description verbosity": "verbose"
+            }
+        }
+    },
     "Color and contrast": {
         options: {
             default: {
@@ -187,5 +207,11 @@ const menuStateValueMap = {
         medium: "1.25em",
         "medium+": "1.5em",
         large: "1.75em"
+    },
+    lineWidth: {
+        default: 2,
+        light: 1,
+        moderate: 3,
+        thick: 4
     }
 }

early_explo/examples/menu/parsePreferences.js

@@ -1,18 +1,18 @@
 const rawPrefs = `- Comprehension (default, moderate, robust)
 - - Alt text appearance (default, show high level, show all)
-- - Description verbosity (default, minimal, verbose)
-- - - Chart (default, minimal, verbose)
-- - - Region alt text (default, minimal, verbose)
-- - - Mark alt text (default, minimal, verbose)
-- - - Interactions (default, minimal, verbose)
-- - - Animations (default, minimal, verbose)
-- - - Sonification (default, minimal, verbose)
-- - Explanation verbosity (default, minimal, verbose)
-- - - Chart (default, minimal, verbose)
-- - - Data (default, minimal, verbose)
-- - - Interactions (default, minimal, verbose)
-- - - Animations (default, minimal, verbose)
-- - - Sonification (default, minimal, verbose)
+- - Description verbosity (default, disable, minimal, verbose)
+- - - Chart (default, disable, minimal, verbose)
+- - - Region alt text (default, disable, minimal, verbose)
+- - - Mark alt text (default, disable, minimal, verbose)
+- - - Interactions (default, disable, minimal, verbose)
+- - - Animations (default, disable, minimal, verbose)
+- - - Sonification (default, disable, minimal, verbose)
+- - Explanation verbosity (default, disable, minimal, verbose)
+- - - Chart (default, disable, minimal, verbose)
+- - - Data (default, disable, minimal, verbose)
+- - - Interactions (default, disable, minimal, verbose)
+- - - Animations (default, disable, minimal, verbose)
+- - - Sonification (default, disable, minimal, verbose)
 - - Cues and labels (default, pattern, show)
 - - - Annotations (default, pattern, show)
 - - - Mark Labels (default, pattern, show)