Periodic Sunburst

The sample shows sunburst with 100% complete children (full circle).

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import * as hierarchical from '@grapecity/wijmo.chart.hierarchical'; import { getData } from './data'; import { PropertiesTile } from './properties-tile'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let data = getData(); data.items.forEach(item => item.value = 1); // add the constant 'value' property to get equal arc angles for all element panels // let mySunburst = new hierarchical.Sunburst('#periodic-sunburst', { palette: chart.Palettes.superhero, legend: { position: chart.Position.None // hide the legend }, innerRadius: 0.3, selectionMode: chart.SelectionMode.Point, dataLabel: { position: chart.PieLabelPosition.Radial, content: '{name}' // the panel should display its name (derived from bindingName property) }, binding: 'value', bindingName: ['name', 'name', 'symbol'], childItemsPath: ['groups', 'items'], itemsSource: data.groups }); // // Initialize the property tile let propTile = new PropertiesTile('#properties-tile'); // // Set up a function to listen for click events on the Sunburst Chart's parent DOM element mySunburst.hostElement.addEventListener('click', e => { // If a panel is clicked, visually select it markSelectedPanel(e.clientX, e.clientY); // Perform a hit test to get a clicked panel's name then use it to set up the info panel via the ViewAdapter propTile.showInfo(mySunburst.hitTest(e.pageX, e.pageY).item); }); // // // ** Logic to handle all chart clicks ** // // Set selected element variables in this outer scope to preserve them let lastSelectedEle; let lastSelectedEleFillColor; // // Keep track of any hidden text elements using an array // This has to be able to store multiple hidden text elements for the case where labels overlap let hiddenTextElements = []; // // Visually marks a panel at the given coordinates as selected function markSelectedPanel(panelX, panelY) { // First, 'unselect' (restore the fill color of) the element that was selected last, if there is one if (lastSelectedEle && lastSelectedEleFillColor) { lastSelectedEle.setAttribute('fill', lastSelectedEleFillColor); } // // Define our selected element and check to see if it's a panel that we can fill let selectedElement = document.elementFromPoint(panelX, panelY); // if (selectedElement && selectedElement.hasAttribute('fill') && selectedElement.tagName === 'path') { // Reset the lastSelectedEle and then change the fill color of the clicked panel let fillColor = selectedElement.getAttribute('fill'); lastSelectedEle = selectedElement; lastSelectedEleFillColor = fillColor; // let color = new wijmo.Color(fillColor); color.a = 1; selectedElement.setAttribute('fill', color.toString()); // while (hiddenTextElements.length > 0) { // if we hid any text elements in the process, reshow them hiddenTextElements.pop().style.display = 'block'; } } else { if (selectedElement && selectedElement.tagName === 'text') { // super hacky way to get the right panel if a data label is clicked selectedElement.style.display = 'none'; // hide the data label hiddenTextElements.push(selectedElement); // keep track of hidden text elements markSelectedPanel(panelX, panelY); // run the method again with the data label hidden } } // return false; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Periodic Sunburst</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <!-- The main container where the Sunburst control is rendered --> <div id="periodic-sunburst"> <!-- The main properties container - has individual info panes for each type of info view --> <div id="properties-tile"></div> </div> </body> </html> import * as wijmo from '@grapecity/wijmo'; // export function getData() { // Arrays named by "Group" containing all of the possible "Subgroup" types let METAL_TYPES = ['Alkali Metal', 'Alkaline Earth Metal', 'Transition Metal', 'Lanthanide', 'Actinide', 'Metal'], NON_METAL_TYPES = ['Noble Gas', 'Halogen', 'Nonmetal'], OTHER_TYPES = ['Metalloid', 'Transactinide']; // // Separate out the titles that will be on the chart as constants so that they can be // easily changed as options later let METALS_TITLE = 'Metals', NON_METALS_TITLE = 'Nonmetals', OTHERS_TITLE = 'Others'; // // flatten the resulting raw element data array by removing the ID and "un-nesting" the properties object let elementData = getPeriodicTableElements().map(item => item.properties); // // initialize a new object from the Wijmo CollectionView function using our "cleansed" array let elementCv = new wijmo.CollectionView(elementData); // // Do the first tier of grouping // We'll take advantage of the wijmo.collections.PropertyGroupDescription object to sort elements // in the collection view based on which constant array contains their type elementCv.groupDescriptions.push(new wijmo.PropertyGroupDescription('type', (item, prop) => { if (METAL_TYPES.indexOf(item[prop]) > -1) { return METALS_TITLE; } else if (NON_METAL_TYPES.indexOf(item[prop]) > -1) { return NON_METALS_TITLE; } else { return OTHERS_TITLE; } })); // // Do the second tier of grouping // The only consideration we have to make here is that we don't want to duplicate group names. So if // we find another "Metal" or "Nonmetal", we need to prefix it with "Other." Finally, we just want to // go ahead and add the appropriate plural ending to make things sound more natural elementCv.groupDescriptions.push(new wijmo.PropertyGroupDescription('type', (item, prop) => { let value = item[prop], endsWithS = value.length > 0 && value[value.length - 1] == 's'; // if (value === METAL_TYPES[METAL_TYPES.length - 1] || value === NON_METAL_TYPES[NON_METAL_TYPES.length - 1]) { return 'Other ' + value + (endsWithS ? 'es' : 's'); } else { return value + (endsWithS ? 'es' : 's'); } })); // // Descriptions of the different subcategories ordered by the type lists above // The metal and nonmetal descriptions have one extra item for the "Others" category let METAL_DESCRIPTIONS = ['Shiny,Soft,Highly Reactive,Low Melting Point', 'Ductile,Malleable,Low Density,High Melting Point', 'Brittle,Poor Metals,Low Melting Point', 'High Melting Point,High Density', 'Soluble,Highly Reactive', 'Radioactive,Paramagnetic'], NON_METAL_DESCRIPTIONS = ['Volatile,Low Elasticity,Good Insulators', 'Colorless,Odorless,Low Chemical Reactivity', 'Toxic,Highly Reactive,Poor Conductors'], OTHER_DESCRIPTIONS = ['Metallic looking solids,Semiconductors', 'Radioactive,Synthetic Elements'], DESCRIPTION_COLLECTION = [NON_METAL_DESCRIPTIONS, METAL_DESCRIPTIONS, OTHER_DESCRIPTIONS]; // create an array containing all of the element description arrays // // Assign a new object property to each "subgroup" Object in the CollectionView based on the arrays above // This property will be stored in the CollectionView items and can be recalled later for display on the chart for (let i = 0; i < elementCv.groups.length; i++) { for (let j = 0; j < elementCv.groups[i].groups.length; j++) { let item = elementCv.groups[i].groups[j]; item.elementProperties = DESCRIPTION_COLLECTION[i][j]; } } // return elementCv; } // function getPeriodicTableElements() { return [ { "id": "1", "properties": { "atomic-number": "1", "element": "Hydrogen", "symbol": "H", "atomic-weight": "1.00794", "period": "1", "group": "1", "phase": "gas", "type": "Nonmetal", "ionic-radius": "0.012", "atomic-radius": "0.79", "electronegativity": "2.2", "first-ionization-potential": "13.5984", "density": "8.988E-05", "melting-point-k": "14.175", "boiling-point-k": "20.28", "isotopes": "3", "discoverer": "Cavendish", "year-of-discovery": "1766", "specific-heat-capacity": "14.304", "electron-configuration": "1s1", "display-row": "1", "display-column": "1" } }, { "id": "2", "properties": { "atomic-number": "2", "element": "Helium", "symbol": "He", "atomic-weight": "4.002602", "period": "1", "group": "18", "phase": "gas", "type": "Noble Gas", "atomic-radius": "0.49", "first-ionization-potential": "24.5874", "density": "0.0001785", "boiling-point-k": "4.22", "isotopes": "5", "discoverer": "Janssen", "year-of-discovery": "1868", "specific-heat-capacity": "5.193", "electron-configuration": "1s2", "display-row": "1", "display-column": "18" } }, { "id": "3", "properties": { "atomic-number": "3", "element": "Lithium", "symbol": "Li", "atomic-weight": "6.941", "period": "2", "group": "1", "phase": "solid", "most-stable-crystal": "bcc", "type": "Alkali Metal", "ionic-radius": "0.76", "atomic-radius": "2.1", "electronegativity": "0.98", "first-ionization-potential": "5.3917", "density": "0.534", "melting-point-k": "453.85", "boiling-point-k": "1615", "isotopes": "5", "discoverer": "Arfvedson", "year-of-discovery": "1817", "specific-heat-capacity": "3.582", "electron-configuration": "[He] 2s1", "display-row": "2", "display-column": "1" } }, { "id": "4", "properties": { "atomic-number": "4", "element": "Beryllium", "symbol": "Be", "atomic-weight": "9.012182", "period": "2", "group": "2", "phase": "solid", "most-stable-crystal": "hex", "type": "Alkaline Earth Metal", "ionic-radius": "0.35", "atomic-radius": "1.4", "electronegativity": "1.57", "first-ionization-potential": "9.3227", "density": "1.85", "melting-point-k": "1560.15", "boiling-point-k": "2742", "isotopes": "6", "discoverer": "Vaulquelin", "year-of-discovery": "1798", "specific-heat-capacity": "1.825", "electron-configuration": "[He] 2s2", "display-row": "2", "display-column": "2" } }, { "id": "5", "properties": { "atomic-number": "5", "element": "Boron", "symbol": "B", "atomic-weight": "10.811", "period": "2", "group": "13", "phase": "solid", "most-stable-crystal": "rho", "type": "Metalloid", "ionic-radius": "0.23", "atomic-radius": "1.2", "electronegativity": "2.04", "first-ionization-potential": "8.298", "density": "2.34", "melting-point-k": "2573.15", "boiling-point-k": "4200", "isotopes": "6", "discoverer": "Gay-Lussac", "year-of-discovery": "1808", "specific-heat-capacity": "1.026", "electron-configuration": "[He] 2s2 2p1", "display-row": "2", "display-column": "13" } }, { "id": "6", "properties": { "atomic-number": "6", "element": "Carbon", "symbol": "C", "atomic-weight": "12.0107", "period": "2", "group": "14", "phase": "solid", "most-stable-crystal": "hex", "type": "Nonmetal", "atomic-radius": "0.91", "electronegativity": "2.55", "first-ionization-potential": "11.2603", "density": "2.267", "melting-point-k": "3948.15", "boiling-point-k": "4300", "isotopes": "7", "discoverer": "Prehistoric", "specific-heat-capacity": "0.709", "electron-configuration": "[He] 2s2 2p2", "display-row": "2", "display-column": "14" } }, { "id": "7", "properties": { "atomic-number": "7", "element": "Nitrogen", "symbol": "N", "atomic-weight": "14.0067", "period": "2", "group": "15", "phase": "gas", "type": "Nonmetal", "ionic-radius": "0.13", "atomic-radius": "0.75", "electronegativity": "3.04", "first-ionization-potential": "14.5341", "density": "0.0012506", "melting-point-k": "63.29", "boiling-point-k": "77.36", "isotopes": "8", "discoverer": "Rutherford", "year-of-discovery": "1772", "specific-heat-capacity": "1.04", "electron-configuration": "[He] 2s2 2p3", "display-row": "2", "display-column": "15" } }, { "id": "8", "properties": { "atomic-number": "8", "element": "Oxygen", "symbol": "O", "atomic-weight": "15.9994", "period": "2", "group": "16", "phase": "gas", "type": "Nonmetal", "ionic-radius": "1.4", "atomic-radius": "0.65", "electronegativity": "3.44", "first-ionization-potential": "13.6181", "density": "0.001429", "melting-point-k": "50.5", "boiling-point-k": "90.2", "isotopes": "8", "discoverer": "Priestley/Scheele", "year-of-discovery": "1774", "specific-heat-capacity": "0.918", "electron-configuration": "[He] 2s2 2p4", "display-row": "2", "display-column": "16" } }, { "id": "9", "properties": { "atomic-number": "9", "element": "Fluorine", "symbol": "F", "atomic-weight": "18.9984032", "period": "2", "group": "17", "phase": "gas", "type": "Halogen", "ionic-radius": "1.3", "atomic-radius": "0.57", "electronegativity": "3.98", "first-ionization-potential": "17.4228", "density": "0.001696", "melting-point-k": "53.63", "boiling-point-k": "85.03", "isotopes": "6", "discoverer": "Moissan", "year-of-discovery": "1886", "specific-heat-capacity": "0.824", "electron-configuration": "[He] 2s2 2p5", "display-row": "2", "display-column": "17" } }, { "id": "10", "properties": { "atomic-number": "10", "element": "Neon", "symbol": "Ne", "atomic-weight": "20.1797", "period": "2", "group": "18", "phase": "gas", "type": "Noble Gas", "atomic-radius": "0.51", "first-ionization-potential": "21.5645", "density": "0.0008999", "melting-point-k": "24.703", "boiling-point-k": "27.07", "isotopes": "8", "discoverer": "Ramsay and Travers", "year-of-discovery": "1898", "specific-heat-capacity": "1.03", "electron-configuration": "[He] 2s2 2p6", "display-row": "2", "display-column": "18" } }, { "id": "11", "properties": { "atomic-number": "11", "element": "Sodium", "symbol": "Na", "atomic-weight": "22.98976928", "period": "3", "group": "1", "phase": "solid", "most-stable-crystal": "bcc", "type": "Alkali Metal", "ionic-radius": "1", "atomic-radius": "2.2", "electronegativity": "0.93", "first-ionization-potential": "5.1391", "density": "0.971", "melting-point-k": "371.15", "boiling-point-k": "1156", "isotopes": "7", "discoverer": "Davy", "year-of-discovery": "1807", "specific-heat-capacity": "1.228", "electron-configuration": "[Ne] 3s1", "display-row": "3", "display-column": "1" } }, { "id": "12", "properties": { "atomic-number": "12", "element": "Magnesium", "symbol": "Mg", "atomic-weight": "24.305", "period": "3", "group": "2", "phase": "solid", "most-stable-crystal": "hex", "type": "Alkaline Earth Metal", "ionic-radius": "0.72", "atomic-radius": "1.7", "electronegativity": "1.31", "first-ionization-potential": "7.6462", "density": "1.738", "melting-point-k": "923.15", "boiling-point-k": "1363", "isotopes": "8", "discoverer": "Black", "year-of-discovery": "1755", "specific-heat-capacity": "1.023", "electron-configuration": "[Ne] 3s2", "display-row": "3", "display-column": "2" } }, { "id": "13", "properties": { "atomic-number": "13", "element": "Aluminum", "symbol": "Al", "atomic-weight": "26.9815386", "period": "3", "group": "13", "phase": "solid", "most-stable-crystal": "fcc", "type": "Metal", "ionic-radius": "0.54", "atomic-radius": "1.8", "electronegativity": "1.61", "first-ionization-potential": "5.9858", "density": "2.698", "melting-point-k": "933.4", "boiling-point-k": "2792", "isotopes": "8", "discoverer": "W�hler", "year-of-discovery": "1827", "specific-heat-capacity": "0.897", "electron-configuration": "[Ne] 3s2 3p1", "display-row": "3", "display-column": "13" } }, { "id": "14", "properties": { "atomic-number": "14", "element": "Silicon", "symbol": "Si", "atomic-weight": "28.0855", "period": "3", "group": "14", "phase": "solid", "most-stable-crystal": "fcc", "type": "Metalloid", "ionic-radius": "0.4", "atomic-radius": "1.5", "electronegativity": "1.9", "first-ionization-potential": "8.1517", "density": "2.3296", "melting-point-k": "1683.15", "boiling-point-k": "3538", "isotopes": "8", "discoverer": "Berzelius", "year-of-discovery": "1824", "specific-heat-capacity": "0.705", "electron-configuration": "[Ne] 3s2 3p2", "display-row": "3", "display-column": "14" } }, { "id": "15", "properties": { "atomic-number": "15", "element": "Phosphorus", "symbol": "P", "atomic-weight": "30.973762", "period": "3", "group": "15", "phase": "solid", "most-stable-crystal": "cub", "type": "Nonmetal", "ionic-radius": "0.38", "atomic-radius": "1.2", "electronegativity": "2.19", "first-ionization-potential": "10.4867", "density": "1.82", "melting-point-k": "317.25", "boiling-point-k": "553", "isotopes": "7", "discoverer": "BranBrand", "year-of-discovery": "1669", "specific-heat-capacity": "0.769", "electron-configuration": "[Ne] 3s2 3p3", "display-row": "3", "display-column": "15" } }, { "id": "16", "properties": { "atomic-number": "16", "element": "Sulfur", "symbol": "S", "atomic-weight": "32.065", "period": "3", "group": "16", "phase": "solid", "most-stable-crystal": "orth", "type": "Nonmetal", "ionic-radius": "0.37", "atomic-radius": "1.1", "electronegativity": "2.58", "first-ionization-potential": "10.36", "density": "2.067", "melting-point-k": "388.51", "boiling-point-k": "717.8", "isotopes": "10", "discoverer": "Prehistoric", "specific-heat-capacity": "0.71", "electron-configuration": "[Ne] 3s2 3p4", "display-row": "3", "display-column": "16" } }, { "id": "17", "properties": { "atomic-number": "17", "element": "Chlorine", "symbol": "Cl", "atomic-weight": "35.453", "period": "3", "group": "17", "phase": "gas", "type": "Halogen", "ionic-radius": "1.8", "atomic-radius": "0.97", "electronegativity": "3.16", "first-ionization-potential": "12.9676", "density": "0.003214", "melting-point-k": "172.31", "boiling-point-k": "239.11", "isotopes": "11", "discoverer": "Scheele", "year-of-discovery": "1774", "specific-heat-capacity": "0.479", "electron-configuration": "[Ne] 3s2 3p5", "display-row": "3", "display-column": "17" } }, { "id": "18", "properties": { "atomic-number": "18", "element": "Argon", "symbol": "Ar", "atomic-weight": "39.948", "period": "3", "group": "18", "phase": "gas", "type": "Noble Gas", "atomic-radius": "0.88", "first-ionization-potential": "15.7596", "density": "0.0017837", "melting-point-k": "83.96", "boiling-point-k": "87.3", "isotopes": "8", "discoverer": "Rayleigh and Ramsay", "year-of-discovery": "1894", "specific-heat-capacity": "0.52", "electron-configuration": "[Ne] 3s2 3p6", "display-row": "3", "display-column": "18" } }, { "id": "19", "properties": { "atomic-number": "19", "element": "Potassium", "symbol": "K", "atomic-weight": "39.0983", "period": "4", "group": "1", "phase": "solid", "most-stable-crystal": "bcc", "type": "Alkali Metal", "ionic-radius": "1.4", "atomic-radius": "2.8", "electronegativity": "0.82", "first-ionization-potential": "4.3407", "density": "0.862", "melting-point-k": "336.5", "boiling-point-k": "1032", "isotopes": "10", "discoverer": "Davy", "year-of-discovery": "1807", "specific-heat-capacity": "0.757", "electron-configuration": "[Ar] 4s1", "display-row": "4", "display-column": "1" } }, { "id": "20", "properties": { "atomic-number": "20", "element": "Calcium", "symbol": "Ca", "atomic-weight": "40.078", "period": "4", "group": "2", "phase": "solid", "most-stable-crystal": "fcc", "type": "Alkaline Earth Metal", "ionic-radius": "0.99", "atomic-radius": "2.2", "electronegativity": "1", "first-ionization-potential": "6.1132", "density": "1.54", "melting-point-k": "1112.15", "boiling-point-k": "1757", "isotopes": "14", "discoverer": "Davy", "year-of-discovery": "1808", "specific-heat-capacity": "0.647", "electron-configuration": "[Ar] 4s2", "display-row": "4", "display-column": "2" } }, { "id": "21", "properties": { "atomic-number": "21", "element": "Scandium", "symbol": "Sc", "atomic-weight": "44.955912", "period": "4", "group": "3", "phase": "solid", "most-stable-crystal": "hex", "type": "Transition Metal", "ionic-radius": "0.75", "atomic-radius": "2.1", "electronegativity": "1.36", "first-ionization-potential": "6.5615", "density": "2.989", "melting-point-k": "1812.15", "boiling-point-k": "3109", "isotopes": "15", "discoverer": "Nilson", "year-of-discovery": "1878", "specific-heat-capacity": "0.568", "electron-configuration": "[Ar] 3d1 4s2", "display-row": "4", "display-column": "3" } }, { "id": "22", "properties": { "atomic-number": "22", "element": "Titanium", "symbol": "Ti", "atomic-weight": "47.867", "period": "4", "group": "4", "phase": "solid", "most-stable-crystal": &q