[displayFn] plotly

[hbkim]

Chart.js 이외에 여러 차트 선택지를 추가하였습니다.

display: plotly

• plotly 스크립트를 사용할 수 있습니다.
• ChatGPT 등을 통해 더 잘 활용할 수 있습니다. (e.g. “plotly로 bar 그리는 js 코드를 알려줘”)

displayFn

• block.id와 displayFn안에 차트를 그릴때 ID가 동일해야합니다.
• sqlMany 기능이 추가되었습니다. (여러개 쿼리 실행시 rows[0], rows[1] 안에 각각 결과가 담깁니다: 지난주/이번주 데이터 비교 등에 사용 가능)
• displayFn안에서 쓸수있는 변수: rows, id, openModal, openAction, _ lodash 데이터 처리용

예시1 YAML 코드

menus:
- path: pages/8y_rbk-1
  name: plotly 1
pages:
- path: pages/8y_rbk-1
  # title: 제목
  # subtitle: 내용
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT DATE(created_at), COUNT(id) FROM TestLog 
      WHERE created_at > '2024-05-15'
      GROUP BY 1
    modals:
      - path: view
        blocks:
          - type: query
            resource: mysql.qa
            sqlType: select
            sql: SELECT :id
            params:
              - key: id
                valueFromRow: id

    display: plotly
    id: bar-chart
    style:
      height: 500px
      widht: 200px
    displayFn: |
      // 데이터 정의
      var trace1 = {
          x: ['Category A', 'Category B', 'Category C'],
          y: [20, 14, 23],
          name: 'Series 1',
          type: 'bar',
          marker: {
              color: 'rgba(255, 99, 132, 0.6)',
              line: {
                  color: 'rgba(255, 99, 132, 1.0)',
                  width: 2
              }
          }
      };

      var trace2 = {
          x: ['Category A', 'Category B', 'Category C'],
          y: [12, 18, 29],
          name: 'Series 2',
          type: 'bar',
          marker: {
              color: 'rgba(54, 162, 235, 0.6)',
              line: {
                  color: 'rgba(54, 162, 235, 1.0)',
                  width: 2
              }
          }
      };

      var trace3 = {
          x: ['Category A', 'Category B', 'Category C'],
          y: [30, 22, 17],
          name: 'Series 3',
          type: 'bar',
          marker: {
              color: 'rgba(75, 192, 192, 0.6)',
              line: {
                  color: 'rgba(75, 192, 192, 1.0)',
                  width: 2
              }
          }
      };

      var data = [trace1, trace2, trace3];

      // 레이아웃 정의
      var layout = {
          title: 'Complex Bar Chart',
          xaxis: {
              title: 'Categories',
              tickangle: -45
          },
          yaxis: {
              title: 'Values',
              range: [0, 40]
          },
          barmode: 'group',
          bargap: 0.2,
          bargroupgap: 0.1,
          annotations: [
              {
                  x: 'Category A',
                  y: 30,
                  xref: 'x',
                  yref: 'y',
                  text: 'Highest Value in Category A',
                  showarrow: true,
                  arrowhead: 7,
                  ax: 0,
                  ay: -40
              }
          ]
      };

      // 차트 그리기
      Plotly.newPlot('bar-chart', data, layout);

예시2 YAML 코드

menus:
- path: pages/8y_rbk-2
  name: plotly 2
pages:
- path: pages/8y_rbk-2
  # title: 제목
  # subtitle: 내용
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT DATE(created_at), COUNT(id) FROM TestLog 
      WHERE created_at > '2024-05-15'
      GROUP BY 1
    modals:
      - path: view
        blocks:
          - type: query
            resource: mysql.qa
            sqlType: select
            sql: SELECT :id
            params:
              - key: id
                valueFromRow: id


    display: plotly
    id: bar-chart
    style:
      height: 500px
      widht: 200px
    displayFn: |
      // 데이터 정의
      var data = [
          {
              x: ['Category A', 'Category B', 'Category C'],
              y: [20, 14, 23],
              type: 'bar'
          }
      ];

      // 레이아웃 정의
      var layout = {
          title: 'Sample Bar Chart',
          xaxis: {
              title: 'Categories'
          },
          yaxis: {
              title: 'Values'
          }
      };

      // 차트 그리기
      Plotly.newPlot('bar-chart', data, layout);