Curriculums Hierachy Graph

::: echarts Curriculums

myChart.showLoading();

fetch('data/curriculums.json')
  .then(response => response.json())
  .then(data => {
    myChart.hideLoading();
    myChart.setOption(
      (option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: function (params) {
            return `
              <div style="text-align: left;">
                <strong>Curriculum: </strong>${params.data.unique_key}<br/>
                <strong>Title</strong>: ${params.data.title}<br/>
                <strong>Description</strong>: ${params.data.description}<br/>
              </div>
            `;
          }
        },
        legend: {
          top: '2%',
          left: '3%',
          orient: 'vertical',
          data: [
            {
              name: 'Curriculum (Old)',
              icon: 'rectangle'
            }
          ],
          borderColor: '#c23531'
        },
        series: [
          {initialTreeDepth: -1,
            type: 'tree',
            name: 'tree1',
            data: [data],
            top: '5%',
            left: '17%',
            bottom: '2%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      })
    );
    chart.setOption(option);
  })
  .catch(error => {
    console.error('Error loading JSON data:', error);
  });

:::