DynamoDB query to Google Charts line chart in Next.js

Viewed 19

I have a DynamoDB table that I would like to display data from on my Next.js website, in the form of a Google Chart. I have already setup access to the DynamoDB table, so am able to load in the data that I need (see code snippets and picture below):

db.js

import aws from 'aws-sdk';

const client = new aws.DynamoDB.DocumentClient({
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET_KEY,
  region: process.env.REGION,
  params: {
    TableName: process.env.TABLE_NAME
  }
});

export default {
  get: (params) => client.get(params).promise(),
  put: (params) => client.put(params).promise(),
  query: (params) => client.query(params).promise(),
  update: (params) => client.update(params).promise(),
  delete: (params) => client.delete(params).promise()
};

pages/folder1/folder2/[id].tsx

import dynamoDb from '/db';
import { Chart } from 'react-google-charts';

const options = {
  title: "Title",
  hAxis: { title: "Timestamp" },
  vAxis: { title: "Price" },
  legend: "none"
};

export async function getStaticProps({ params }) {

  const { data: item } = await dynamoDb.query({
    ExpressionAttributeValues: {
      ":itemNo": parseInt(params.id)
    }, 
    KeyConditionExpression: "itemNo = :itemNo",
  })
  .then(data => console.log(data.Items.map(function(s) {
    return {
      s
    }
  })));

  return {
    props: {
      item: item,
    },
  };
}

export async function getStaticPaths() {

  return {
    paths: [
      {
        params: {
          id: '1' # example number
        }
      }
    ],
    fallback: false
  };

}

export default ({ item }) => (
  <Chart
    chartType="LineChart"
    data={item}
    options={options}
    graphID="LineChart"
    width="100%"
    height="400px"
  />
);

enter image description here

My two questions are:

  .then(data => data.Items.map(function(s) {
    return {
      'timeNow': s.timeNow,
      'nowPrice': s.nowPrice
    }
  }));
  1. I only want the 'timeNow' and 'nowPrice' values from the data query for my chart. Would I be right in thinking that changing the 'console.log' part of 'folder1/folder2/[id].tsx' to the above snippet would correctly output the subset JSON that I need?

  2. I want to use this 'timeNow' and 'nowPrice' subset JSON to produce a line chart using Google Charts, with 'timeNow' on the x-axis and 'nowPrice' on the y-axis. I have included an attempt at exporting the chart, which fails and gives the following error: 'Error serializing .item returned from getStaticProps in "/folder1/folder2/[id]". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.' Any help in correctly formatting and outputting this would be much appreciated.

0 Answers
Related