Skip to content

Commit

Permalink
Merge pull request #31 from highcharts/main
Browse files Browse the repository at this point in the history 
Fix highcharts script issue looking for doc lang before body is rendered
  • Loading branch information
@frankelavsky
frankelavsky authored Dec 20, 2024
2 parents c442f3b + 1aa4825 commit 77e4135
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 87 deletions.
178 changes: 91 additions & 87 deletions early_explo/examples/menu/menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,109 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Highcharts Preferences Menu</title>
<link rel="stylesheet" href="./menu.css">
<link rel="stylesheet" href="./chart.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
</head>

<!-- <figure class="highcharts-figure"> -->
<body>
<div>
<div class="highcharts-responsive-two-columns">
<div class="highcharts-responsive-column-menu highcharts-hiding-children" id="menu"></div>
<div class="highcharts-responsive-column-chart">
<h2 id="dashboard-heading">Dashboard</h2>
<figure class="highcharts-figure">
<div id="container"></div>
<div id="hidden-container"></div>
<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>
</figure>
<div class="highcharts-responsive-two-columns">
<div class="highcharts-menu-halfwidth">
<figure class="highcharts-figure">
<div id="bar-container"></div>
<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.
</p>
</figure>
</div>
<div class="highcharts-menu-halfwidth">
<figure class="highcharts-figure">
<div id="line-container"></div>
<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. Sonification will play all values selected in legend.
</p>
<button id="sonify">Play chart sonification</button>
</figure>
<main>
<div>
<div class="highcharts-responsive-two-columns">
<div class="highcharts-responsive-column-menu highcharts-hiding-children" id="menu"></div>
<div class="highcharts-responsive-column-chart">
<h2 id="dashboard-heading">Dashboard</h2>
<figure class="highcharts-figure">
<div id="container"></div>
<div id="hidden-container"></div>
<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>
</figure>
<div class="highcharts-responsive-two-columns">
<div class="highcharts-menu-halfwidth">
<figure class="highcharts-figure">
<div id="bar-container"></div>
<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.
</p>
</figure>
</div>
<div class="highcharts-menu-halfwidth">
<figure class="highcharts-figure">
<div id="line-container"></div>
<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. Sonification will play all values selected in legend.
</p>
<button id="sonify">Play chart sonification</button>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<svg aria-hidden="true" style="position:absolute;opacity:0;pointer-events:none;">
<defs aria-hidden="true">
<pattern id="highcharts-pattern-0-156-0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5" stroke="rgba(0,156,0,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-26-141-255" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5" stroke="rgba(26,141,255,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-152-152-152" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 2 0 L 2 5 M 4 0 L 4 5" stroke="rgba(152,152,152,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-116-255-231" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 2 L 5 2 M 0 4 L 5 4" stroke="rgba(116,255,231,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-140-255-116" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5" stroke="rgba(140,255,116,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-255-141-161" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 0 L 5 10 L 10 0" stroke="rgba(255,141,161,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-244-192-255" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 3 3 L 8 3 L 8 8 L 3 8 Z" stroke="rgba(244,192,255,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-230-230-230" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0" stroke="rgba(230,230,230,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-249-231-159" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11" stroke="rgba(249,231,159,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-255-165-0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9" stroke="rgba(255,165,0,1)" stroke-width="2" fill="none">
</path>
</pattern>
</defs>
</svg>
</div>
<div>
<svg aria-hidden="true" style="position:absolute;opacity:0;pointer-events:none;">
<defs aria-hidden="true">
<pattern id="highcharts-pattern-0-156-0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5" stroke="rgba(0,156,0,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-26-141-255" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5" stroke="rgba(26,141,255,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-152-152-152" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 2 0 L 2 5 M 4 0 L 4 5" stroke="rgba(152,152,152,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-116-255-231" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 2 L 5 2 M 0 4 L 5 4" stroke="rgba(116,255,231,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-140-255-116" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="5" height="5" x="0" y="0" patternTransform="scale(1.4 1.4)">
<path d="M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5" stroke="rgba(140,255,116,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-255-141-161" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 0 L 5 10 L 10 0" stroke="rgba(255,141,161,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-244-192-255" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 3 3 L 8 3 L 8 8 L 3 8 Z" stroke="rgba(244,192,255,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-230-230-230" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0" stroke="rgba(230,230,230,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-249-231-159" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11" stroke="rgba(249,231,159,1)" stroke-width="2" fill="none">
</path>
</pattern>
<pattern id="highcharts-pattern-255-165-0" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9" stroke="rgba(255,165,0,1)" stroke-width="2" fill="none">
</path>
</pattern>
</defs>
</svg>
</div>
</main>
</body>

<!-- </figure> -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="./colorUtilities.js"></script>
<script src="./datasets.js"></script>
<script src="./menuState.js"></script>
Expand Down
9 changes: 9 additions & 0 deletions early_explo/examples/menu/parsePreferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ const rawPrefs = `- Comprehension (default, moderate, robust)
const parsePreferences = (str) => {
const lines = str.trim().split('\n');
let root = [];
let totalCount = 0
let combinatoric = 1

lines.forEach(line => {
const indentLevel = (line.match(/-/g) || []).length;
Expand Down Expand Up @@ -247,6 +249,13 @@ const parsePreferences = (str) => {
newItem.parent = target
target.children.push(newItem)
}
if (newItem.available) {
totalCount += options.length
combinatoric = combinatoric * Math.max(options.length,1)
}
});
console.log(root.length)
console.log(totalCount)
console.log(combinatoric)
return root;
}

0 comments on commit 77e4135

Please sign in to comment.