from pathlib import Path
from typing import Optional
import streamlit as st
import streamlit.components.v1 as components
SAMPLE={
"title": {
"text": 'U.S Solar Employment Growth by Job Category, 2010-2020'
},
"subtitle": {
"text": 'Source: IREC'
},
"yAxis": {
"title": {
"text": 'Number of Employees'
}
},
"xAxis": {
"accessibility": {
"rangeDescription": 'Range: 2010 to 2020'
}
},
"legend": {
"layout": 'vertical',
"align": 'right',
"verticalAlign": 'middle'
},
"plotOptions": {
"series": {
"label": {
"connectorAllowed": False
},
"pointStart": 2010
}
},
"series": [{
"name": 'Installation & Developers',
"data": [43934, 48656, 65165, 81827, 112143, 142383,
171533, 165174, 155157, 161454, 154610]
}, {
"name": 'Manufacturing',
"data": [24916, 37941, 29742, 29851, 32490, 30282,
38121, 36885, 33726, 34243, 31050]
}, {
"name": 'Sales & Distribution',
"data": [11744, 30000, 16005, 19771, 20185, 24377,
32147, 30912, 29243, 29213, 25663]
}, {
"name": 'Operations & Maintenance',
"data": ["null", "null", "null", "null", "null", "null", "null",
"null", 11164, 11218, 10077]
}, {
"name": 'Other',
"data": [21908, 5548, 8105, 11248, 8989, 11816, 18274,
17300, 13053, 11906, 10073]
}],
"responsive": {
"rules": [{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"legend": {
"layout": 'horizontal',
"align": 'center',
"verticalAlign": 'bottom'
}
}
}]
}
}
SAMPLE2={
"chart": {
"type": 'streamgraph',
"marginBottom": 30,
"zoomType": 'x'
},
"title": {
"floating": True,
"align": 'left',
"text": 'Winter Olympic Medal Wins'
},
"subtitle": {
"floating": True,
"align": 'left',
"y": 30,
"text": 'Source: sports-reference.com'
},
"xAxis": {
"maxPadding": 0,
"type": 'category',
"crosshair": True,
"categories": [
'',
'1924 Chamonix',
'1928 St. Moritz',
'1932 Lake Placid',
'1936 Garmisch-Partenkirchen',
'1940 Cancelled (Sapporo)',
'1944 Cancelled (Cortina d\'Ampezzo)',
'1948 St. Moritz',
'1952 Oslo',
'1956 Cortina d\'Ampezzo',
'1960 Squaw Valley',
'1964 Innsbruck',
'1968 Grenoble',
'1972 Sapporo',
'1976 Innsbruck',
'1980 Lake Placid',
'1984 Sarajevo',
'1988 Calgary',
'1992 Albertville',
'1994 Lillehammer',
'1998 Nagano',
'2002 Salt Lake City',
'2006 Turin',
'2010 Vancouver',
'2014 Sochi'
],
"labels": {
"align": 'left',
"reserveSpace": False,
"rotation": 270
},
"lineWidth": 0,
"margin": 20,
"tickWidth": 0
},
"yAxis": {
"visible": False,
"startOnTick": False,
"endOnTick": False
},
"legend": {
"enabled": False
},
"annotations": [{
"labels": [{
"point": {
"x": 5.5,
"xAxis": 0,
"y": 30,
"yAxis": 0
},
"text": 'Cancelled
during
World War II'
}, {
"point": {
"x": 18,
"xAxis": 0,
"y": 90,
"yAxis": 0
},
"text": 'Soviet Union fell,
Germany united'
}],
"labelOptions": {
"backgroundColor": 'rgba(255,255,255,0.5)',
"borderColor": 'silver'
}
}],
"plotOptions": {
"series": {
"label": {
"minFontSize": 5,
"maxFontSize": 15,
"style": {
"color": 'rgba(255,255,255,0.75)'
}
},
"accessibility": {
"exposeAsGroupOnly": True
}
}
},
"series": [{
"name": "Finland",
"data": [
0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7,
7, 6, 12, 7, 9, 5, 5
]
}, {
"name": "Austria",
"data": [
0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10,
21, 9, 17, 17, 23, 16, 17
]
}, {
"name": "Sweden",
"data": [
0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4,
3, 3, 7, 14, 11, 15
]
}, {
"name": "Norway",
"data": [
0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10,
9, 5, 20, 26, 25, 25, 19, 23, 26
]
}, {
"name": "U.S.",
"data": [
0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6,
11, 13, 13, 34, 25, 37, 28
]
}, {
"name": "East Germany",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25,
0, 0, 0, 0, 0, 0, 0
]
}, {
"name": "West Germany",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Germany",
"data": [
0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26,
24, 29, 36, 29, 30, 19
]
}, {
"name": "Netherlands",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4,
4, 11, 8, 9, 8, 24
]
}, {
"name": "Italy",
"data": [
0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14,
20, 10, 13, 11, 5, 8
]
}, {
"name": "Canada",
"data": [
0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7,
13, 15, 17, 24, 26, 25
]
}, {
"name": "Switzerland",
"data": [
0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15,
3, 9, 7, 11, 14, 9, 11
]
}, {
"name": "Great Britain",
"data": [
0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0,
2, 1, 2, 1, 1, 4
]
}, {
"name": "France",
"data": [
0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9,
5, 8, 11, 9, 11, 15
]
}, {
"name": "Hungary",
"data": [
0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Unified Team",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Soviet Union",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25,
29, 0, 0, 0, 0, 0, 0, 0
]
}, {
"name": "Russia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
23, 18, 13, 22, 15, 33
]
}, {
"name": "Japan",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7,
5, 10, 2, 1, 5, 8
]
}, {
"name": "Czechoslovakia",
"data": [
0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Poland",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0,
0, 0, 2, 2, 6, 6
]
}, {
"name": "Spain",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
0, 0, 0, 0, 0, 0
]
}, {
"name": "China",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3,
3, 8, 8, 11, 11, 9
]
}, {
"name": "South Korea",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4,
6, 6, 4, 11, 14, 8
]
}, {
"name": "Czech Republic",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 3, 3, 4, 6, 8
]
}, {
"name": "Belarus",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
2, 2, 1, 1, 3, 6
]
}, {
"name": "Kazakhstan",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
3, 2, 0, 0, 1, 1
]
}, {
"name": "Bulgaria",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
0, 1, 3, 1, 0, 0
]
}, {
"name": "Denmark",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 0, 0, 0, 0
]
}, {
"name": "Ukraine",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
2, 1, 0, 2, 0, 2
]
}, {
"name": "Australia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
1, 1, 2, 2, 3, 3
]
}, {
"name": "Belgium",
"data": [
0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 0, 0, 0, 0
]
}, {
"name": "Romania",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Liechtenstein",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Yugoslavia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Luxembourg",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
0, 0, 0, 0, 0, 0
]
}, {
"name": "New Zealand",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
0, 0, 0, 0, 0, 0
]
}, {
"name": "North Korea",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1,
0, 0, 0, 0, 0, 0
]
}, {
"name": "Slovakia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 1, 3, 1
]
}, {
"name": "Croatia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 4, 3, 3, 1
]
}, {
"name": "Slovenia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
3, 0, 1, 0, 3, 8
]
}, {
"name": "Latvia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 1, 2, 4
]
}, {
"name": "Estonia",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 3, 3, 1, 0
]
}, {
"name": "Uzbekistan",
"data": [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
1, 0, 0, 0, 0, 0
]
}],
"exporting": {
"sourceWidth": 800,
"sourceHeight": 600
}
}
SAMPLE3={
"chart": {
"type": 'bubble',
"plotBorderWidth": 1,
"zoomType": 'xy'
},
"title": {
"text": 'Highcharts bubbles with radial gradient fill'
},
"xAxis": {
"gridLineWidth": 1,
"accessibility": {
"rangeDescription": 'Range: 0 to 100.'
}
},
"yAxis": {
"startOnTick": False,
"endOnTick": False,
"accessibility": {
"rangeDescription": 'Range: 0 to 100.'
}
},
"series": [{
"data": [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
"marker": {
"fillColor": {
"radialGradient": { "cx": 0.4, "cy": 0.3, "r": 0.7 },
"stops": [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(124,181,236,0.5)']
]
}
}
}, {
"data": [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
"marker": {
"fillColor": {
"radialGradient": { "cx": 0.4, "cy": 0.3, "r": 0.7 },
"stops": [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(67,67,72,0.5)']
]
}
}
}]
}
SAMPLE4={
"chart":{
"type":"packedbubble",
"height":"100%"
},
"title":{
"text":"Carbon emissions around the world (2014)"
},
"tooltip":{
"useHTML":True,
"pointFormat":"{point.name}: {point.value}m CO2"
},
"plotOptions":{
"packedbubble":{
"minSize":"20%",
"maxSize":"100%",
"zMin":0,
"zMax":1000,
"layoutAlgorithm":{
"gravitationalConstant":0.05,
"splitSeries":True,
"seriesInteraction":False,
"dragBetweenSeries":True,
"parentNodeLimit":True
},
"dataLabels":{
"enabled":True,
"format":"{point.name}",
"filter":{
"property":"y",
"operator":">",
"value":250
},
"style":{
"color":"black",
"textOutline":"none",
"fontWeight":"normal"
}
}
}
},
"series":[
{
"name":"Europe",
"data":[
{
"name":"Germany",
"value":767.1
},
{
"name":"Croatia",
"value":20.7
},
{
"name":"Belgium",
"value":97.2
},
{
"name":"Czech Republic",
"value":111.7
},
{
"name":"Netherlands",
"value":158.1
},
{
"name":"Spain",
"value":241.6
},
{
"name":"Ukraine",
"value":249.1
},
{
"name":"Poland",
"value":298.1
},
{
"name":"France",
"value":323.7
},
{
"name":"Romania",
"value":78.3
},
{
"name":"United Kingdom",
"value":415.4
},
{
"name":"Turkey",
"value":353.2
},
{
"name":"Italy",
"value":337.6
},
{
"name":"Greece",
"value":71.1
},
{
"name":"Austria",
"value":69.8
},
{
"name":"Belarus",
"value":67.7
},
{
"name":"Serbia",
"value":59.3
},
{
"name":"Finland",
"value":54.8
},
{
"name":"Bulgaria",
"value":51.2
},
{
"name":"Portugal",
"value":48.3
},
{
"name":"Norway",
"value":44.4
},
{
"name":"Sweden",
"value":44.3
},
{
"name":"Hungary",
"value":43.7
},
{
"name":"Switzerland",
"value":40.2
},
{
"name":"Denmark",
"value":40
},
{
"name":"Slovakia",
"value":34.7
},
{
"name":"Ireland",
"value":34.6
},
{
"name":"Croatia",
"value":20.7
},
{
"name":"Estonia",
"value":19.4
},
{
"name":"Slovenia",
"value":16.7
},
{
"name":"Lithuania",
"value":12.3
},
{
"name":"Luxembourg",
"value":10.4
},
{
"name":"Macedonia",
"value":9.5
},
{
"name":"Moldova",
"value":7.8
},
{
"name":"Latvia",
"value":7.5
},
{
"name":"Cyprus",
"value":7.2
}
]
},
{
"name":"Africa",
"data":[
{
"name":"Senegal",
"value":8.2
},
{
"name":"Cameroon",
"value":9.2
},
{
"name":"Zimbabwe",
"value":13.1
},
{
"name":"Ghana",
"value":14.1
},
{
"name":"Kenya",
"value":14.1
},
{
"name":"Sudan",
"value":17.3
},
{
"name":"Tunisia",
"value":24.3
},
{
"name":"Angola",
"value":25
},
{
"name":"Libya",
"value":50.6
},
{
"name":"Ivory Coast",
"value":7.3
},
{
"name":"Morocco",
"value":60.7
},
{
"name":"Ethiopia",
"value":8.9
},
{
"name":"United Republic of Tanzania",
"value":9.1
},
{
"name":"Nigeria",
"value":93.9
},
{
"name":"South Africa",
"value":392.7
},
{
"name":"Egypt",
"value":225.1
},
{
"name":"Algeria",
"value":141.5
}
]
},
{
"name":"Oceania",
"data":[
{
"name":"Australia",
"value":409.4
},
{
"name":"New Zealand",
"value":34.1
},
{
"name":"Papua New Guinea",
"value":7.1
}
]
},
{
"name":"North America",
"data":[
{
"name":"Costa Rica",
"value":7.6
},
{
"name":"Honduras",
"value":8.4
},
{
"name":"Jamaica",
"value":8.3
},
{
"name":"Panama",
"value":10.2
},
{
"name":"Guatemala",
"value":12
},
{
"name":"Dominican Republic",
"value":23.4
},
{
"name":"Cuba",
"value":30.2
},
{
"name":"USA",
"value":5334.5
},
{
"name":"Canada",
"value":566
},
{
"name":"Mexico",
"value":456.3
}
]
},
{
"name":"South America",
"data":[
{
"name":"El Salvador",
"value":7.2
},
{
"name":"Uruguay",
"value":8.1
},
{
"name":"Bolivia",
"value":17.8
},
{
"name":"Trinidad and Tobago",
"value":34
},
{
"name":"Ecuador",
"value":43
},
{
"name":"Chile",
"value":78.6
},
{
"name":"Peru",
"value":52
},
{
"name":"Colombia",
"value":74.1
},
{
"name":"Brazil",
"value":501.1
},
{
"name":"Argentina",
"value":199
},
{
"name":"Venezuela",
"value":195.2
}
]
},
{
"name":"Asia",
"data":[
{
"name":"Nepal",
"value":6.5
},
{
"name":"Georgia",
"value":6.5
},
{
"name":"Brunei Darussalam",
"value":7.4
},
{
"name":"Kyrgyzstan",
"value":7.4
},
{
"name":"Afghanistan",
"value":7.9
},
{
"name":"Myanmar",
"value":9.1
},
{
"name":"Mongolia",
"value":14.7
},
{
"name":"Sri Lanka",
"value":16.6
},
{
"name":"Bahrain",
"value":20.5
},
{
"name":"Yemen",
"value":22.6
},
{
"name":"Jordan",
"value":22.3
},
{
"name":"Lebanon",
"value":21.1
},
{
"name":"Azerbaijan",
"value":31.7
},
{
"name":"Singapore",
"value":47.8
},
{
"name":"Hong Kong",
"value":49.9
},
{
"name":"Syria",
"value":52.7
},
{
"name":"DPR Korea",
"value":59.9
},
{
"name":"Israel",
"value":64.8
},
{
"name":"Turkmenistan",
"value":70.6
},
{
"name":"Oman",
"value":74.3
},
{
"name":"Qatar",
"value":88.8
},
{
"name":"Philippines",
"value":96.9
},
{
"name":"Kuwait",
"value":98.6
},
{
"name":"Uzbekistan",
"value":122.6
},
{
"name":"Iraq",
"value":139.9
},
{
"name":"Pakistan",
"value":158.1
},
{
"name":"Vietnam",
"value":190.2
},
{
"name":"United Arab Emirates",
"value":201.1
},
{
"name":"Malaysia",
"value":227.5
},
{
"name":"Kazakhstan",
"value":236.2
},
{
"name":"Thailand",
"value":272
},
{
"name":"Taiwan",
"value":276.7
},
{
"name":"Indonesia",
"value":453
},
{
"name":"Saudi Arabia",
"value":494.8
},
{
"name":"Japan",
"value":1278.9
},
{
"name":"China",
"value":10540.8
},
{
"name":"India",
"value":2341.9
},
{
"name":"Russia",
"value":1766.4
},
{
"name":"Iran",
"value":618.2
},
{
"name":"Korea",
"value":610.1
}
]
}
]
}
SAMPLE5={
"chart":{
"type":"column"
},
"title":{
"align":"left",
"text":"Browser market shares. January, 2022"
},
"subtitle":{
"align":"left",
"text":"Click the columns to view versions. Source: statcounter.com"
},
"accessibility":{
"announceNewData":{
"enabled":True
}
},
"xAxis":{
"type":"category"
},
"yAxis":{
"title":{
"text":"Total percent market share"
}
},
"legend":{
"enabled":False
},
"plotOptions":{
"series":{
"borderWidth":0,
"dataLabels":{
"enabled":True,
"format":"{point.y:.1f}%"
}
}
},
"tooltip":{
"headerFormat":"{series.name}
",
"pointFormat":"{point.name}: {point.y:.2f}% of total
"
},
"series":[
{
"name":"Browsers",
"colorByPoint":True,
"data":[
{
"name":"Chrome",
"y":63.06,
"drilldown":"Chrome"
},
{
"name":"Safari",
"y":19.84,
"drilldown":"Safari"
},
{
"name":"Firefox",
"y":4.18,
"drilldown":"Firefox"
},
{
"name":"Edge",
"y":4.12,
"drilldown":"Edge"
},
{
"name":"Opera",
"y":2.33,
"drilldown":"Opera"
},
{
"name":"Internet Explorer",
"y":0.45,
"drilldown":"Internet Explorer"
},
{
"name":"Other",
"y":1.582,
"drilldown":"null"
}
]
}
],
"drilldown":{
"breadcrumbs":{
"position":{
"align":"right"
}
},
"series":[
{
"name":"Chrome",
"id":"Chrome",
"data":[
[
"v65.0",
0.1
],
[
"v64.0",
1.3
],
[
"v63.0",
53.02
],
[
"v62.0",
1.4
],
[
"v61.0",
0.88
],
[
"v60.0",
0.56
],
[
"v59.0",
0.45
],
[
"v58.0",
0.49
],
[
"v57.0",
0.32
],
[
"v56.0",
0.29
],
[
"v55.0",
0.79
],
[
"v54.0",
0.18
],
[
"v51.0",
0.13
],
[
"v49.0",
2.16
],
[
"v48.0",
0.13
],
[
"v47.0",
0.11
],
[
"v43.0",
0.17
],
[
"v29.0",
0.26
]
]
},
{
"name":"Firefox",
"id":"Firefox",
"data":[
[
"v58.0",
1.02
],
[
"v57.0",
7.36
],
[
"v56.0",
0.35
],
[
"v55.0",
0.11
],
[
"v54.0",
0.1
],
[
"v52.0",
0.95
],
[
"v51.0",
0.15
],
[
"v50.0",
0.1
],
[
"v48.0",
0.31
],
[
"v47.0",
0.12
]
]
},
{
"name":"Internet Explorer",
"id":"Internet Explorer",
"data":[
[
"v11.0",
6.2
],
[
"v10.0",
0.29
],
[
"v9.0",
0.27
],
[
"v8.0",
0.47
]
]
},
{
"name":"Safari",
"id":"Safari",
"data":[
[
"v11.0",
3.39
],
[
"v10.1",
0.96
],
[
"v10.0",
0.36
],
[
"v9.1",
0.54
],
[
"v9.0",
0.13
],
[
"v5.1",
0.2
]
]
},
{
"name":"Edge",
"id":"Edge",
"data":[
[
"v16",
2.6
],
[
"v15",
0.92
],
[
"v14",
0.4
],
[
"v13",
0.1
]
]
},
{
"name":"Opera",
"id":"Opera",
"data":[
[
"v50.0",
0.96
],
[
"v49.0",
0.82
],
[
"v12.1",
0.14
]
]
}
]
}
}
SAMPLE6={
"chart":{
"type":"tilemap",
"inverted":True,
"height":"80%"
},
"accessibility":{
"description":"A tile map represents the states of the USA by population in 2016. The hexagonal tiles are positioned to geographically echo the map of the USA. A color-coded legend states the population levels as below 1 million (beige), 1 to 5 million (orange), 5 to 20 million (pink) and above 20 million (hot pink). The chart is interactive, and the individual state data points are displayed upon hovering. Three states have a population of above 20 million: California (39.3 million), Texas (27.9 million) and Florida (20.6 million). The northern US region from Massachusetts in the Northwest to Illinois in the Midwest contains the highest concentration of states with a population of 5 to 20 million people. The southern US region from South Carolina in the Southeast to New Mexico in the Southwest contains the highest concentration of states with a population of 1 to 5 million people. 6 states have a population of less than 1 million people; these include Alaska, Delaware, Wyoming, North Dakota, South Dakota and Vermont. The state with the lowest population is Wyoming in the Northwest with 584,153 people.",
"screenReaderSection":{
"beforeChartFormat":"{chartTitle}
""+""{chartSubtitle}
""+""{chartLongdesc}
""+""{viewTableButton}
"
},
"point":{
"valueDescriptionFormat":"{index}. {xDescription}, {point.value}."
}
},
"title":{
"text":"U.S. states by population in 2016"
},
"subtitle":{
"text":"Source:Wikipedia"
},
"xAxis":{
"visible":False
},
"yAxis":{
"visible":False
},
"colorAxis":{
"dataClasses":[
{
"from":0,
"to":1000000,
"color":"#F9EDB3",
"name":"< 1M"
},
{
"from":1000000,
"to":5000000,
"color":"#FFC428",
"name":"1M - 5M"
},
{
"from":5000000,
"to":20000000,
"color":"#FF7987",
"name":"5M - 20M"
},
{
"from":20000000,
"color":"#FF2371",
"name":"> 20M"
}
]
},
"tooltip":{
"headerFormat":"",
"pointFormat":"The population of {point.name} is {point.value}"
},
"plotOptions":{
"series":{
"dataLabels":{
"enabled":True,
"format":"{point.hc-a2}",
"color":"#000000",
"style":{
"textOutline":False
}
}
}
},
"series":[
{
"name":"",
"data":[
{
"hc-a2":"AL",
"name":"Alabama",
"region":"South",
"x":6,
"y":7,
"value":4849377
},
{
"hc-a2":"AK",
"name":"Alaska",
"region":"West",
"x":0,
"y":0,
"value":737732
},
{
"hc-a2":"AZ",
"name":"Arizona",
"region":"West",
"x":5,
"y":3,
"value":6745408
},
{
"hc-a2":"AR",
"name":"Arkansas",
"region":"South",
"x":5,
"y":6,
"value":2994079
},
{
"hc-a2":"CA",
"name":"California",
"region":"West",
"x":5,
"y":2,
"value":39250017
},
{
"hc-a2":"CO",
"name":"Colorado",
"region":"West",
"x":4,
"y":3,
"value":5540545
},
{
"hc-a2":"CT",
"name":"Connecticut",
"region":"Northeast",
"x":3,
"y":11,
"value":3596677
},
{
"hc-a2":"DE",
"name":"Delaware",
"region":"South",
"x":4,
"y":9,
"value":935614
},
{
"hc-a2":"DC",
"name":"District of Columbia",
"region":"South",
"x":4,
"y":10,
"value":7288000
},
{
"hc-a2":"FL",
"name":"Florida",
"region":"South",
"x":8,
"y":8,
"value":20612439
},
{
"hc-a2":"GA",
"name":"Georgia",
"region":"South",
"x":7,
"y":8,
"value":10310371
},
{
"hc-a2":"HI",
"name":"Hawaii",
"region":"West",
"x":8,
"y":0,
"value":1419561
},
{
"hc-a2":"ID",
"name":"Idaho",
"region":"West",
"x":3,
"y":2,
"value":1634464
},
{
"hc-a2":"IL",
"name":"Illinois",
"region":"Midwest",
"x":3,
"y":6,
"value":12801539
},
{
"hc-a2":"IN",
"name":"Indiana",
"region":"Midwest",
"x":3,
"y":7,
"value":6596855
},
{
"hc-a2":"IA",
"name":"Iowa",
"region":"Midwest",
"x":3,
"y":5,
"value":3107126
},
{
"hc-a2":"KS",
"name":"Kansas",
"region":"Midwest",
"x":5,
"y":5,
"value":2904021
},
{
"hc-a2":"KY",
"name":"Kentucky",
"region":"South",
"x":4,
"y":6,
"value":4413457
},
{
"hc-a2":"LA",
"name":"Louisiana",
"region":"South",
"x":6,
"y":5,
"value":4649676
},
{
"hc-a2":"ME",
"name":"Maine",
"region":"Northeast",
"x":0,
"y":11,
"value":1330089
},
{
"hc-a2":"MD",
"name":"Maryland",
"region":"South",
"x":4,
"y":8,
"value":6016447
},
{
"hc-a2":"MA",
"name":"Massachusetts",
"region":"Northeast",
"x":2,
"y":10,
"value":6811779
},
{
"hc-a2":"MI",
"name":"Michigan",
"region":"Midwest",
"x":2,
"y":7,
"value":9928301
},
{
"hc-a2":"MN",
"name":"Minnesota",
"region":"Midwest",
"x":2,
"y":4,
"value":5519952
},
{
"hc-a2":"MS",
"name":"Mississippi",
"region":"South",
"x":6,
"y":6,
"value":2984926
},
{
"hc-a2":"MO",
"name":"Missouri",
"region":"Midwest",
"x":4,
"y":5,
"value":6093000
},
{
"hc-a2":"MT",
"name":"Montana",
"region":"West",
"x":2,
"y":2,
"value":1023579
},
{
"hc-a2":"NE",
"name":"Nebraska",
"region":"Midwest",
"x":4,
"y":4,
"value":1881503
},
{
"hc-a2":"NV",
"name":"Nevada",
"region":"West",
"x":4,
"y":2,
"value":2839099
},
{
"hc-a2":"NH",
"name":"New Hampshire",
"region":"Northeast",
"x":1,
"y":11,
"value":1326813
},
{
"hc-a2":"NJ",
"name":"New Jersey",
"region":"Northeast",
"x":3,
"y":10,
"value":8944469
},
{
"hc-a2":"NM",
"name":"New Mexico",
"region":"West",
"x":6,
"y":3,
"value":2085572
},
{
"hc-a2":"NY",
"name":"New York",
"region":"Northeast",
"x":2,
"y":9,
"value":19745289
},
{
"hc-a2":"NC",
"name":"North Carolina",
"region":"South",
"x":5,
"y":9,
"value":10146788
},
{
"hc-a2":"ND",
"name":"North Dakota",
"region":"Midwest",
"x":2,
"y":3,
"value":739482
},
{
"hc-a2":"OH",
"name":"Ohio",
"region":"Midwest",
"x":3,
"y":8,
"value":11614373
},
{
"hc-a2":"OK",
"name":"Oklahoma",
"region":"South",
"x":6,
"y":4,
"value":3878051
},
{
"hc-a2":"OR",
"name":"Oregon",
"region":"West",
"x":4,
"y":1,
"value":3970239
},
{
"hc-a2":"PA",
"name":"Pennsylvania",
"region":"Northeast",
"x":3,
"y":9,
"value":12784227
},
{
"hc-a2":"RI",
"name":"Rhode Island",
"region":"Northeast",
"x":2,
"y":11,
"value":1055173
},
{
"hc-a2":"SC",
"name":"South Carolina",
"region":"South",
"x":6,
"y":8,
"value":4832482
},
{
"hc-a2":"SD",
"name":"South Dakota",
"region":"Midwest",
"x":3,
"y":4,
"value":853175
},
{
"hc-a2":"TN",
"name":"Tennessee",
"region":"South",
"x":5,
"y":7,
"value":6651194
},
{
"hc-a2":"TX",
"name":"Texas",
"region":"South",
"x":7,
"y":4,
"value":27862596
},
{
"hc-a2":"UT",
"name":"Utah",
"region":"West",
"x":5,
"y":4,
"value":2942902
},
{
"hc-a2":"VT",
"name":"Vermont",
"region":"Northeast",
"x":1,
"y":10,
"value":626011
},
{
"hc-a2":"VA",
"name":"Virginia",
"region":"South",
"x":5,
"y":8,
"value":8411808
},
{
"hc-a2":"WA",
"name":"Washington",
"region":"West",
"x":2,
"y":1,
"value":7288000
},
{
"hc-a2":"WV",
"name":"West Virginia",
"region":"South",
"x":4,
"y":7,
"value":1850326
},
{
"hc-a2":"WI",
"name":"Wisconsin",
"region":"Midwest",
"x":2,
"y":5,
"value":5778708
},
{
"hc-a2":"WY",
"name":"Wyoming",
"region":"West",
"x":3,
"y":3,
"value":584153
}
]
}
]
}
SAMPLE7={
"chart":{
"type":"pie"
},
"title":{
"text":"Browser market shares. January, 2022"
},
"subtitle":{
"text":"Click the slices to view versions. Source: statcounter.com"
},
"accessibility":{
"announceNewData":{
"enabled":True
},
"point":{
"valueSuffix":"%"
}
},
"plotOptions":{
"series":{
"dataLabels":{
"enabled":True,
"format":"{point.name}: {point.y:.1f}%"
}
}
},
"tooltip":{
"headerFormat":"{series.name}
",
"pointFormat":"{point.name}: {point.y:.2f}% of total
"
},
"series":[
{
"name":"Browsers",
"colorByPoint":True,
"data":[
{
"name":"Chrome",
"y":61.04,
"drilldown":"Chrome"
},
{
"name":"Safari",
"y":9.47,
"drilldown":"Safari"
},
{
"name":"Edge",
"y":9.32,
"drilldown":"Edge"
},
{
"name":"Firefox",
"y":8.15,
"drilldown":"Firefox"
},
{
"name":"Other",
"y":11.02,
"drilldown":"null"
}
]
}
],
"drilldown":{
"series":[
{
"name":"Chrome",
"id":"Chrome",
"data":[
[
"v97.0",
36.89
],
[
"v96.0",
18.16
],
[
"v95.0",
0.54
],
[
"v94.0",
0.7
],
[
"v93.0",
0.8
],
[
"v92.0",
0.41
],
[
"v91.0",
0.31
],
[
"v90.0",
0.13
],
[
"v89.0",
0.14
],
[
"v88.0",
0.1
],
[
"v87.0",
0.35
],
[
"v86.0",
0.17
],
[
"v85.0",
0.18
],
[
"v84.0",
0.17
],
[
"v83.0",
0.21
],
[
"v81.0",
0.1
],
[
"v80.0",
0.16
],
[
"v79.0",
0.43
],
[
"v78.0",
0.11
],
[
"v76.0",
0.16
],
[
"v75.0",
0.15
],
[
"v72.0",
0.14
],
[
"v70.0",
0.11
],
[
"v69.0",
0.13
],
[
"v56.0",
0.12
],
[
"v49.0",
0.17
]
]
},
{
"name":"Safari",
"id":"Safari",
"data":[
[
"v15.3",
0.1
],
[
"v15.2",
2.01
],
[
"v15.1",
2.29
],
[
"v15.0",
0.49
],
[
"v14.1",
2.48
],
[
"v14.0",
0.64
],
[
"v13.1",
1.17
],
[
"v13.0",
0.13
],
[
"v12.1",
0.16
]
]
},
{
"name":"Edge",
"id":"Edge",
"data":[
[
"v97",
6.62
],
[
"v96",
2.55
],
[
"v95",
0.15
]
]
},
{
"name":"Firefox",
"id":"Firefox",
"data":[
[
"v96.0",
4.17
],
[
"v95.0",
3.33
],
[
"v94.0",
0.11
],
[
"v91.0",
0.23
],
[
"v78.0",
0.16
],
[
"v52.0",
0.15
]
]
}
]
}
}
SAMPLE8={
"title":{
"text":"Sales of petroleum products March, Norway",
"align":"left"
},
"xAxis":{
"categories":[
"Jet fuel",
"Duty-free diesel",
"Petrol",
"Diesel",
"Gas oil"
]
},
"yAxis":{
"title":{
"text":"Million liter"
}
},
"labels":{
"items":[
{
"html":"Total liter",
"style":{
"left":"50px",
"top":"18px",
"color":"black"
}
}
]
},
"series":[
{
"type":"column",
"name":"2020",
"data":[
59,
83,
65,
228,
184
]
},
{
"type":"column",
"name":"2021",
"data":[
24,
79,
72,
240,
167
]
},
{
"type":"column",
"name":"2022",
"data":[
58,
88,
75,
250,
176
]
},
{
"type":"spline",
"name":"Average",
"data":[
47,
83.33,
70.66,
239.33,
175.66
],
"marker":{
"lineWidth":2,
"fillColor":"black",
}
},
{
"type":"pie",
"name":"Liter",
"data":[
{
"name":"2020",
"y":619,
"color": "#7cb4ec"
},
{
"name":"2021",
"y":586,
"color": "#434348"
},
{
"name":"2022",
"y":647,
"color":"#90ed7d"
}
],
"center":[
80,
70
],
"size":100,
"showInLegend":False,
"dataLabels":{
"enabled":False
}
}
]
}
SAMPLE9={
"chart":{
"type":"solidgauge",
"height":"90%"
},
"title":{
"text":"Activity",
"style":{
"fontSize":"24px"
}
},
"tooltip":{
"borderWidth":0,
"backgroundColor":"none",
"shadow":False,
"style":{
"fontSize":"16px"
},
"valueSuffix":"%",
"pointFormat":"{series.name}
{point.y}",
"positioner":{
"x":"50px",
"y":100
}
},
"pane":{
"startAngle":0,
"endAngle":360,
"background":[
{
"radius":"112%",
"innerRadius":"88%",
"borderWidth":0
},
{
"radius":"87%",
"innerRadius":"63%",
"borderWidth":0
},
{
"radius":"62%",
"innerRadius":"38%",
"borderWidth":0
}
]
},
"yAxis":{
"min":0,
"max":100,
"lineWidth":0,
"tickPositions":[
]
},
"plotOptions":{
"solidgauge":{
"dataLabels":{
"enabled":False
},
"linecap":"round",
"stickyTracking":False,
"rounded":True
}
},
"series":[
{
"name":"Move",
"data":[
{
"color":"lightgreen",
"radius":"112%",
"innerRadius":"88%",
"y":80
}
]
},
{
"name":"Exercise",
"data":[
{
"color":"red",
"radius":"87%",
"innerRadius":"63%",
"y":65
}
]
},
{
"name":"Stand",
"data":[
{
"color":"blue",
"radius":"62%",
"innerRadius":"38%",
"y":50
}
]
}
]
}
SAMPLE10={
"chart": {
"type": 'gauge',
"plotBackgroundColor": "white",
"plotBackgroundImage": "white",
"plotBorderWidth": 0,
"plotShadow": False,
"height": '80%'
},
"title": {
"text": 'Speedometer'
},
"pane": {
"startAngle": -90,
"endAngle": 89.9,
"background": "null",
"center": ['50%', '75%'],
"size": '110%'
},
"yAxis": {
"min": 0,
"max": 200,
"tickPixelInterval": 72,
"tickPosition": 'inside',
"tickColor": '#FFFFFF',
"tickLength": 20,
"tickWidth": 2,
"minorTickInterval": "null",
"labels": {
"distance": 20,
"style": {
"fontSize": '14px'
}
},
"plotBands": [{
"from": 0,
"to": 120,
"color": '#55BF3B',
"thickness": 20
}, {
"from": 120,
"to": 160,
"color": '#DDDF0D',
"thickness": 20
}, {
"from": 160,
"to": 200,
"color": '#DF5353',
"thickness": 20
}]
},
"series": [{
"name": 'Speed',
"data": [80],
"tooltip": {
"valueSuffix": ' km/h'
},
"dataLabels": {
"format": '{y} km/h',
"borderWidth": 0,
"color": '#333333',
"style": {
"fontSize": '16px'
}
},
"dial": {
"radius": '80%',
"backgroundColor": 'gray',
"baseWidth": 12,
"baseLength": '0%',
"rearLength": '0%'
},
"pivot": {
"backgroundColor": 'gray',
"radius": 6
}
}]
}
SAMPLE11={
"title": {
"text": 'Highcharts Dependency Wheel'
},
"accessibility": {
"point": {
"valueDescriptionFormat": '{index}. From {point.from} to {point.to}: {point.weight}.'
}
},
"series": [{
"keys": ['from', 'to', 'weight'],
"data": [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1],
['USA', 'Portugal', 1],
['USA', 'France', 1],
['USA', 'Spain', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['Portugal', 'Senegal', 1],
['Portugal', 'Morocco', 1],
['Portugal', 'South Africa', 3],
['France', 'Angola', 1],
['France', 'Senegal', 3],
['France', 'Mali', 3],
['France', 'Morocco', 3],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Spain', 'Morocco', 3],
['Spain', 'South Africa', 1],
['England', 'Angola', 1],
['England', 'Senegal', 1],
['England', 'Morocco', 2],
['England', 'South Africa', 7],
['South Africa', 'China', 5],
['South Africa', 'India', 1],
['South Africa', 'Japan', 3],
['Angola', 'China', 5],
['Angola', 'India', 1],
['Angola', 'Japan', 3],
['Senegal', 'China', 5],
['Senegal', 'India', 1],
['Senegal', 'Japan', 3],
['Mali', 'China', 5],
['Mali', 'India', 1],
['Mali', 'Japan', 3],
['Morocco', 'China', 5],
['Morocco', 'India', 1],
['Morocco', 'Japan', 3],
['Japan', 'Brazil', 1]
],
"type": 'dependencywheel',
"name": 'Dependency wheel series',
"dataLabels": {
"color": '#333',
"style": {
"textOutline": 'none'
},
"textPath": {
"enabled": True,
"attributes": {
"dy": 5
}
},
"distance": 10
},
"size": '95%'
}]
}
frontend_dir = (Path(__file__).parent / "frontend").absolute()
_component_func = components.declare_component(
"streamlit_highcharts", path=str(frontend_dir)
)
def streamlit_highcharts(
options=SAMPLE,
height=410,
key: Optional[str] = None,
):
"""
Add a descriptive docstring
"""
component_value = _component_func(
options=options,key=key,height=height
)
return component_value
# def main():
# st.write("## Example")
# selSample=st.selectbox("Choose a sample",[SAMPLE,SAMPLE2,SAMPLE3,SAMPLE4,SAMPLE5,SAMPLE6,SAMPLE7,SAMPLE8,SAMPLE9,SAMPLE10],format_func=lambda x: str(x["title"]["text"])
# )
# value = streamlit_highcharts(selSample,640)
# with st.expander("Show code...",expanded=False):
# st.code(str(selSample).replace("},","},\r\n"),language="python")
# if __name__ == "__main__":
# main()