チャート理解分析のメトリック

32641 ワード
react javascript webdev chartjs テキストリンク
私の職場の生態系でショーケースのメトリクスにグラフベースのライブラリを含むの悲惨な必要性があります.ゼロからの機能を構築しながら、我々はルアーダッシュボードから来る多くの機能のパリティを実現した.それは別の指標を示すためにチャートを使用してvarius解析学ダッシュボードを探索するために共同演習だった.
エンジニア/開発者として、どのような形式でどのようなメトリックをレンダリングすべきかを理解するために重要な量のデータ操作/変換プロセスが必要です.
チャートを通るJSライブラリとドキュメントは、学習曲線が短いです.つのグラフ内のいくつかのエンティティを持つデータの異なるセットのサポートは、より柔軟になります.これは、我々の製品要件を柔軟な方法でデータに合わせるのを助けました.
コードの基本設計を説明するために、コード部分に直接ジャンプします.これは2つの主要なものに分けることができます.
グラフの上部にあるラッパーコンポーネント.ベースの反応をサポートするJS.js
ビジネスロジックを分離するカスタム関数
カスタムラッパーコンポーネント
import React, { useEffect, useRef, useState } from 'react';
import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-adapter-moment';
import { PropTypes } from 'mobx-react';

/**
 * @returns JSX Element
 * Native Chart accepts three basic props to render a chart with chartjs library.
 * type : explains the kind of chart mentioned in CHART_TYPES
 * data : the values and the labels that chart should renders
 * options : all the relevant options that should be providing a layout or design the chart.
 */
 export default function NativeChart (props) {
  const [chart, setChart] = useState(null);

  const chartRef = useRef(null);

  useEffect(() => {
    let config = {
      data: props.data,
      plugins: [ChartDataLabels],
      options: props.options
    };

    // Set and override chart types only if the prop 'type' is provided
    props.type && (config['type'] = props.type);

    let chart = new Chart(chartRef.current, config);
    setChart(chart);

    return () => {
      chart.destroy();
      setChart(null);
    };
  }, [props.data, props.options]);

  return (
    <div className='native-chart'>
      <canvas ref={chartRef} />
    </div>
  );
}

NativeChart.propTypes = {
  type: PropTypes.string,
  data: PropTypes.object,
  options: PropTypes.object
};
これは、グラフの基本的なコンポーネントのセットアップです.JSは推薦します.これはチャートのあるキャンバスの要素を含んでいます.JSはグラフを描く.このキャンバス要素は、configのインスタンスでグラフを描画します.このコンポーネントにpropが渡された3つの主要な項目から構成されます.
タイプ:グラフの種類、バー、ライン、エリア、ドーナツ、パイなど.
データ:単純なマッピングオブジェクトは、すべてのデータ点、X軸チック、Y軸目盛り、軸名、実体などを含みます.
const labels = ['Mar 21', 'April 21', 'May 21']; //Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
}
オプション:グラフのオプションは、外観を変更し、製品の仕様に基づいてグラフを感じるキーです.これは、テキスト、色、aeshteticsを変更するには、長い文字列を切り詰める、クリックとホバーのようなグラフとの相互作用、データポイントの変換.
ビジネスロジック用機能
ラッパー/ネイティブのグラフコンポーネントを選択のコンテナページで再利用することができます.これは、タイプ、データとオプションがすぐに利用できることを必要とするところです.この部分を分けるために、レポートで我々はカスタム反応フックのように行動する機能を思いつきました.前述のように、それはタイプ、データとオプションで私たちを返します.これらの3つの構成要素を定式化するために、主なデータと方法で主にこれらのチャートの機能性を操作することができます.
この分離はまた、グラフのレンダリングの前にデータをフォーム化するのに役立ちますので、エンジニアとして私たちのレンダリングサイクルは、データの変更とダイナミックではないことを確認することができます.
// container page of the Chart wrapper/native component

...
  let { chartType, chartData, chartOptions } = generateChart(rep.value, currentTheme, reportGroup, populateDrills, setTileActive, executeScroll);
...
return (
  <>
  ...
  <NativeChart
    key={rep.value.id} // only required when there are list of charts 
    type={chartType}
    data={chartData}
    options={chartOptions}
  />
  ...
  <>
)
上記のスニペットでは、GenerateChartは
バックエンドからのすべてのデータ(例えば、APIを報告する)
アプリの状態に基づいていくつかの他の機能だけでなく、機能のグラフの上に相互作用を定義する
この関数/カスタムフックの内部構造は、同じデータ型に従ってグラフデータを通過します.
チャートの種類は、レンダリングするグラフの種類に言及バックエンドから定義済みになることができます.
グラフデータを反復処理するので、グラフの種類に基づいていくつかのチェックを行うことができます.これらのすべてのチェックは、ラッパーコンポーネントが水和することができる方法でグラフデータを変換することができます.これに加えて、デフォルトのグラフオプションを変更するロジックを指定する必要があります.このウェイチャート.JSは、色のセット、詳細のレベル、再生可能性とビューの変更をレンダリングする明確な指示をしています.
// define default/base chart-type
let chartType = '',

// define default chart-data
let chartData = {
    labels: report.data.labels,
    datasets: []
  };

// define default chart-options
let chartOptions = {
    animation: false,
    maintainAspectRatio: false,
    scales: {
      x: {
        title: {
          display: report.data.title && report.data.title.x ? true : false,
          text: report.data.title && report.data.title.x ? report.data.title.x : '',
          color: currentTheme['content-color-secondary'],
          font: 'Inter',
          padding: {
            top: 8,
            bottom: 8
          }
        },
        ticks: {
          display: true,
          color: currentTheme['content-color-tertiary'],
          padding: 8
        },
        grid: {
          drawOnChartArea: false,
          drawTicks: false,
          borderColor: currentTheme['grey-05'],
          color: currentTheme['grey-05'],
          z: -1
        },
        offset: true
      },
      y: {
        title: {
          display: report.data.title && report.data.title.y ? true : false,
          text: report.data.title && report.data.title.y ? report.data.title.y : '',
          color: currentTheme['content-color-secondary'],
          font: 'Inter',
          padding: {
            bottom: 16
          }
        },
        grid: {
          drawOnChartArea: false,
          drawTicks: false,
          borderColor: currentTheme['grey-05'],
          color: currentTheme['grey-05']
        },
        ticks: {
          display: true,
          padding: 16,
          crossAlign: 'near',
          color: currentTheme['content-color-tertiary'],
          autoSkipPadding: 20
        },
        beginAtZero: true
      }
    },
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          usePointStyle: true,
          color: currentTheme['content-color-primary'],
          boxWidth: 8,
          generateLabels: () => {},
          }
      },
      onHover: (e) => e.chart.canvas.style.cursor = 'pointer',
      onLeave: (e) => e.chart.canvas.style.cursor = 'default',
      onClick: function (e, legendItem, legend){}
      },
      datalabels: {
        display: 'auto',
        anchor: 'center',
        clamp: true,
        font: {
          weight: 600,
          size: 11,
          lineHeight: 1.8
        }
     },
このファイルは、別のラッパー関数と異なる機能の条件を保持することができますが、基本的なロジックは、バックエンドから派生したグラフデータを反復処理し、情報を抽出し、戻り値を返すために、この基本的な要素にフィード、すなわちチャートタイプ、グラフデータ、グラフオプションです.
ここでは、データをチェックし、各データセットに対して、いくつかのオプションと実際のデータパレメータをレンダリングします.このセットアップは、1つのカナバで描画するためにいくつかのタイプのチャートを含める強力な能力を提供します.例えば、私たちは、このレポートページのタイムチャートの上でスロットを使用しましたhttps://cooper.postman-beta.co/reports/resource-usage ) ライングラフと一緒に棒グラフの2つのセットが含まれます.
...
chartData.datasets = _.map(report.data.dataset, (set, index) => {

  if(set.type === DOUGHNUT){
    ...
    // 1. transform chart-data to feed
    ... 
    // 2. transform chart-options according to product-specs and requirements e.g.,
    // 2.1 also modify the CSS here for better look and feel
     _.set(chartOptions, 'scales.x.display', false);
      _.set(chartOptions, 'scales.y.display', false);
      // we hide away ticks from showing up on any axis 

    // 3. Provide the defined colour set to this chart-options e.g., 
    newSet.backgroundColor = DATASETS_COLOURS.slice(0, newSet.data.length);
    newSet.borderColor = DATASETS_COLOURS.slice(0, newSet.data.length);

    // 4. set or unset onClick, onHover behaviours on chart, chart-data-points, etc.
    _.set(chartOptions, 'onClick', () => {})

  }  

  if(set.type == BAR){
    // same as above
  }

  if(set.type == AREA){
    // same as above
  }

  if(set.type == LINE){
    // same as above
  }

}
...
すべてのこのロジックチャートの上に.JSは自動的に計算できるインクリメンタル値を理解する特定の機能を提供します.これはx軸/y軸のticksを自動的にレンダリングするのに本当に有益です.報告では、我々はこれを利用して、バックエンドAPIからデータを、バケツの範囲のバケツをサポートする形式で送ります.我々は、タイムテーブルのチャートとしてこれを呼び出します.彼らは開始と終了点で日付/時刻の任意の範囲を介してスパンすることができます.仕様は以下のように仕様に基づいて提供されるべきです.
// continue in the previous code snippet
if (/*report data suggests that it is a timeseries chart*/) {
      // setup the values based on bucket and other things
      _.set(chartOptions, 'scales.x', {
        ...chartOptions.scales.x,
        type: 'time',
        min: report.data.startLabel,
        max: report.data.endLabel,
        time: {
          unit: report.data.bucket,
          displayFormats: {
            [report.data.bucket]: report.data.labelFormat
          }
        }
      });
これがすべてセットアップであるならば、このカスタム機能は、チャート・タイプ、チャート・データとラッパーに供給されることができるチャート・データとチャート・オプションの完全な皿を作ります.
このドキュメントはコード設計の包括的なチュートリアルです.私は、異なるチームが彼らのデータを変調することができるようにデータ変換の必要を解決することを目指しました.
参考文献
  • https://www.chartjs.org/

  • https://chartjs-plugin-datalabels.netlify.app/ 我々は、データラベルのビューと相互作用を変更するためにこれを使用している
  • ライブラリのようなヘルパーライブラリ、モーメント.クラス名.
  • ああ、https://www.stackoverflow.com/
    • RXJSで角度でデータをキャッシュする方法
    19577人のカナダ人の個人データを公開しない方法