QingWei-Li / laue

🖖📈 Modern charts for Vue 2.0
https://laue.js.org
MIT License
263 stars 34 forks source link

How to draw multiple charts on one area based on an array? #34

Closed adminoid closed 5 years ago

adminoid commented 5 years ago

I have array of data:

let chartData = [
  {
    "time": 1568197200,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 220
      },
      {
        "algo": "equihash",
        "value": 210
      }
    ]
  },
  {
    "time": 1568197500,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 230
      },
      {
        "algo": "equihash",
        "value": 220
      }
    ]
  },
  {
    "time":  1568197800,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 240
      },
      {
        "algo": "equihash",
        "value": 230
      }
    ]
  },
  {
    "time": 1568198100,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 220
      },
      {
        "algo": "equihash",
        "value": 220
      }
    ]
  }
];

For the example above - I need to draw two parallel diagrams for ethash and equihash. Something like that:

<la-cartesian :data="chartData">
    <la-line dot curve v-for="" prop="ethash"></la-line>
    <la-line dot curve prop="equihash"></la-line>
    <la-tooltip>time {{ time value here }}<br>
equihash: {{ equihash value here }}<br>
ethash: {{ ethash value here }}
</la-tooltip>
</la-cartesian>

But I haven't prop... I have only index in "horizontal" array. Is it possible to use laue in my case, or do I need use only native d3?

adminoid commented 5 years ago

Did like this:

<la-cartesian :width="470" :height="100" autoresize :data="topChartData">
  <la-area v-for="prop in topChartDataKeys" curve :curve="curveStep" :prop="prop" :key="topChartData.time">
    <svg>
      <defs>
        <lineargradient id="color-id" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#2c3e50"></stop>
          <stop offset="1" stop-color="#6fa8dc"></stop>
        </lineargradient>
      </defs>
    </svg>
  </la-area>
</la-cartesian>
  // metric is an array containing the necessary things

  let topChartData = [], topChartDataKeys = [];
  metrics.forEach(metric => {

    let topChartDataItem = {
      time: metric.time,
    };

    metric.hashrates.forEach((hash, index) => {
      let key = 'val_' + index;
      topChartDataItem[key] = _.round(_.sum(hash.values), 1);
      if( !_.includes(topChartDataKeys, key) ) {
        topChartDataKeys.push(key);
      }
    });

    topChartData.push(topChartDataItem);

  });

  this.topChartDataKeys = topChartDataKeys;
  this.topChartData = topChartData;