Skip to content

Commit

Permalink
Merge pull request #9 from highcharts/main
Browse files Browse the repository at this point in the history 
add chart and trim options
  • Loading branch information
@frankelavsky
frankelavsky authored Jul 5, 2024
2 parents 4293e5e + 252bae4 commit e1e5a3b
Show file tree
Hide file tree
Showing 6 changed files with 541 additions and 53 deletions.
46 changes: 46 additions & 0 deletions early_explo/examples/menu/chart.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
#csv {
display: none;
}

.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}

.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}

.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}

.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}

.highcharts-data-table tr:hover {
background: #f1f7ff;
}
186 changes: 186 additions & 0 deletions early_explo/examples/menu/chart.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
console.log("bork")
const propNameMap = {
title: "Title",
subtitle: "Subtitle",
tooltip: "Tooltip"
}
const propValueMap = {
fontSize: {
small: "8pt",
"small+": "10pt",
medium: "12pt",
"medium+": "14pt",
large: "16pt"
}
}
const parseProps = (highchartsPropName) => {
let styleObject = {}
let propName = propNameMap[highchartsPropName]
console.log(highchartsPropName)
props.Text["Font Size"].Title.value ? propMap["Font Size"][props.Text["Font Size"].Title.value] : undefined
if (props.Text["Font Size"][propName].value) {
styleObject.fontSize = propValueMap.fontSize[props.Text["Font Size"][propName].value]
}
console.log(styleObject)
return styleObject
}
Highcharts.chart('container', {
title: {
text: 'Estimated US Energy Consumption in 2017',
style: parseProps("title")
},
subtitle: {
text:
'Source: <a href=\'https://www.llnl.gov/\'> Lawrence Livermore National Laboratory</a>',
style: parseProps("subtitle")
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, ' +
'{point.weight}.'
}
},
tooltip: {
headerFormat: null,
pointFormat:
'{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.2f} ' +
'quads',
nodeFormat: '{point.name}: {point.sum:.2f} quads',
style: parseProps("tooltip")
},
series: [{
keys: ['from', 'to', 'weight'],
nodes: [
{
id: 'Electricity & Heat',
color: '#ffa500',
offset: -110
},
{
id: 'Residential',
color: '#74ffe7',
column: 2,
offset: 50
},
{
id: 'Commercial',
color: '#8cff74',
column: 2,
offset: 50
},
{
id: 'Industrial',
color: '#ff8da1',
column: 2,
offset: 50
},
{
id: 'Transportation',
color: '#f4c0ff',
column: 2,
offset: 50
},
{
id: 'Rejected Energy',
color: '#e6e6e6',
column: 3,
offset: -30
},
{
id: 'Energy Services',
color: '#F9E79F',
column: 3
},
{
id: 'Solar',
color: '#009c00'
},
{
id: 'Nuclear',
color: '#1a8dff'
},
{
id: 'Hydro',
color: '#009c00'
},
{
id: 'Wind',
color: '#009c00'
},
{
id: 'Geothermal',
color: '#009c00'
},
{
id: 'Natural Gas',
color: '#1a8dff'
},
{
id: 'Biomass',
color: '#009c00'
},
{
id: 'Coal',
color: '#989898'
},
{
id: 'Petroleum',
color: '#989898',
offset: -1
}
],
data: [
['Solar', 'Electricity & Heat', 0.48],
['Nuclear', 'Electricity & Heat', 8.42],
['Hydro', 'Electricity & Heat', 2.75],
['Wind', 'Electricity & Heat', 2.35],
['Geothermal', 'Electricity & Heat', 0.15],
['Natural Gas', 'Electricity & Heat', 9.54],
['Coal', 'Electricity & Heat', 12.7],
['Biomass', 'Electricity & Heat', 0.52],
['Petroleum', 'Electricity & Heat', 0.21],

['Electricity & Heat', 'Residential', 4.7],
['Solar', 'Residential', 0.19],
['Geothermal', 'Residential', 0.04],
['Natural Gas', 'Residential', 4.58],
['Biomass', 'Residential', 0.33],
['Petroleum', 'Residential', 0.88],

['Electricity & Heat', 'Commercial', 4.6],
['Solar', 'Commercial', 0.08],
['Geothermal', 'Commercial', 0.02],
['Natural Gas', 'Commercial', 3.29],
['Coal', 'Commercial', 0.02],
['Biomass', 'Commercial', 0.16],
['Petroleum', 'Commercial', 0.83],

['Electricity & Heat', 'Industrial', 3.23],
['Solar', 'Industrial', 0.02],
['Hydro', 'Industrial', 0.01],
['Natural Gas', 'Industrial', 9.84],
['Coal', 'Industrial', 1.24],
['Biomass', 'Industrial', 2.48],
['Petroleum', 'Industrial', 8.38],

['Electricity & Heat', 'Transportation', 0.03],
['Natural Gas', 'Transportation', 0.76],
['Biomass', 'Transportation', 1.43],
['Petroleum', 'Transportation', 25.9],

['Electricity & Heat', 'Rejected Energy', 24.7],
['Residential', 'Rejected Energy', 3.75],
['Commercial', 'Rejected Energy', 3.15],
['Industrial', 'Rejected Energy', 12.9],
['Transportation', 'Rejected Energy', 22.2],

['Residential', 'Energy Services', 6.97],
['Commercial', 'Energy Services', 5.84],
['Industrial', 'Energy Services', 12.4],
['Transportation', 'Energy Services', 5.91]
],
type: 'sankey',
name: 'Sankey demo series'
}]

});
64 changes: 61 additions & 3 deletions early_explo/examples/menu/menu.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
body {
padding: 3em;
padding: 2vh 3vw;
}

h1 {
margin-left:0.5em;
}

h1, h2, h3, h4, h5 h6 {
Expand All @@ -20,7 +24,6 @@ legend {
}

details, .highcharts-empty-details {
padding-bottom: 0.5em;
padding-left: 1em;
}

Expand All @@ -29,8 +32,9 @@ details, .highcharts-empty-details {
}

summary, .highcharts-empty-summary {
padding-bottom: 0.25em;
padding-bottom: 0.5em;
padding-top: 0.375em;
padding-left: 0.5em;
}

.highcharts-menu-column {
Expand Down Expand Up @@ -145,4 +149,58 @@ details > summary::before {
details[open] > summary::before {
content: '\25BC';
padding-right: 0;
}

summary {
border: 1px solid #ffffff00;
}

summary:hover {
cursor: pointer;
background-color: #f9fdff;
border: 1px dashed #767676;
border-radius: 8px;
}

/* container */
.highcharts-responsive-two-columns {
display:flex;
flex-wrap:wrap;
}

/* columns */
.highcharts-responsive-two-columns > * {
width:100%;
padding:1rem;
}

/* tablet breakpoint */
@media (min-width:1079px) {
.highcharts-responsive-column-menu {
width:32%;
}
.highcharts-responsive-column-chart {
width:62%;
height: 90vh;
}
}

#menu {
border: 1px solid #767676;
border-radius: 10px;
max-height: 90vh;
overflow: scroll;
}

input:hover {
cursor: pointer;
}

.highcharts-hiding-children .highcharts-hide-unavailable {
display: none;
}

.highcharts-hide-unavailable {
color: #767676;
font-weight: 100;
}
52 changes: 37 additions & 15 deletions early_explo/examples/menu/menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,37 @@
<link rel="stylesheet" href="./menu.css">
<script src="https://code.highcharts.com/highcharts.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/accessibility.js"></script>

<figure class="highcharts-figure">
<div id="menu"></div>
<div id="container"></div>
<p class="highcharts-description">
(chart goes here)
</p>
</figure>

<script src="./menu.js"></script>
<!DOCTYPE html>
<html>
<head>
<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/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/accessibility.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" id="container">
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Sankey charts are used to visualize data flow and volume
between nodes. The wider lines indicate larger volumes.
</p>
</figure>
</div>
</div>
</div>
</body>

<!-- </figure> -->

<script src="./props.js"></script>
<script src="./chart.js"></script>
<script src="./menu.js"></script>

</html>
Loading

0 comments on commit e1e5a3b

Please sign in to comment.