[UI Design] 整合 ESG 公開資料

barry800414 commented 3 months ago

PRD: https://goodjoblife.atlassian.net/wiki/spaces/GJ/pages/92930061/ESG+PRD

Figma 的連結直接放 doc 裡面即可

barry800414 commented 3 weeks ago

Reference UI design:

https://developers.google.com/chart/interactive/docs/gallery

screencapture-file-Users-weiming-codes-goodjob-ui-visualization-google-chart-html-2024-11-17-14_46_45

barry800414 commented 5 days ago

Google Chart

gzipped total 2xx KB
can dynamically load

Rechart

gzipped: 4x KB, unzipped: 4xx KB
can dynamically load in theory, but https://unpkg.com/recharts/umd/Recharts.min.js not found

barry800414 commented 5 days ago

Code example of google chart


<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(drawBarChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', '台積電', '產業平均'],
          ['2020',  100,      80],
          ['2021',  117,      85],
          ['2022',  120,       99],
          ['2023',  130,      100]
        ]);

        var options = {
          title: '非主管員工薪資平均數(萬/年)',
          hAxis: {title: '年份',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
          legend: {position: 'top', maxLines: 3},
          fontSize: 30,
          colors: ["rgb(252, 212, 6)", "black"]
        };

        var chart = new google.visualization.AreaChart(document.getElementById('area_chart_div'));
        chart.draw(data, options);
      }

      function drawBarChart() {
        var data = google.visualization.arrayToDataTable([
          ['職位', 'All', { role: 'style'}, { role: 'annotation' }],
          ['軟體工程師', 120, "rgb(252, 212, 6)", 120],
          ['資深軟體工程師', 220, "rgb(252, 212, 6)", 220],
          ['UI設計師', 80, "rgb(252, 212, 6)", 80],
          ['產品經理', 130, "rgb(252, 212, 6)", 120],
          ['軟體主管', 400, "rgb(252, 212, 6)", 400]
        ]);

        var options = {
          title: '台積電薪資',
          chartArea: {width: '50%'},
          hAxis: {
            title: '新台幣 萬/年',
            minValue: 0
          },
          vAxis: {
            title: '職位'
          },
          legend: { position: 'none' },
          fontSize: 26,
        };

        var chart = new google.visualization.BarChart(document.getElementById('bart_chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="area_chart_div" style="width: 100%; height: 500px;"></div>
    <div id="bart_chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

goodjoblife / GoodJobShare

[UI Design] 整合 ESG 公開資料 #1398

Google Chart

Rechart