Reputation: 699
import React, { useEffect, useState } from 'react'
import { CubeProvider, useCubeQuery } from '@cubejs-client/react'
import { cubejsApi } from '@/services/cube'
import dynamic from 'next/dynamic'
import moment from 'moment'
const DualAxes = dynamic(
() => import('@ant-design/plots').then((mod) => mod.DualAxes),
{ ssr: false }
)
const DemoDualAxes = () => {
const [chartData, setChartData] = useState([])
const [date, setDate] = useState('This quarter')
const { resultSet, error, isLoading } = useCubeQuery(
{
measures: [
'market_data.grad_signal',
'market_data.total_crypto_mcap'
],
timeDimensions: [
{
dimension: 'market_data.date',
granularity: 'day',
dateRange: date
}
],
order: {
'market_data.date': 'asc'
}
},
{
cubejsApi
}
)
useEffect(() => {
if (error) {
console.log('Error', error)
}
if (resultSet) {
const formattedData = resultSet?.loadResponse?.results[0]?.data.map(
(item) => ({
date: moment(item['market_data.date'].split('T')[0]).format('DD-MMM-YY'),
grad_signal: parseInt(item['market_data.grad_signal']),
total_crypto_mcap: parseInt(item['market_data.total_crypto_mcap'])
})
)
setChartData(formattedData)
}
}, [resultSet, error, isLoading])
const config = {
data: [chartData, chartData],
xField: 'date',
yField: ['grad_signal', 'total_crypto_mcap'],
height: 383,
theme: {
styleSheet: {
fontFamily: 'DM Sans, sans-serif'
}
},
geometryOptions: [
{
geometry: 'line',
lineStyle: { lineWidth: 2 },
color: '#1947C8'
},
{
geometry: 'line',
lineStyle: { lineWidth: 2 },
color: '#F17742'
}
],
xAxis: {
type: 'cat'
},
legend: {
position: 'bottom',
itemName: {
style: {
fontSize: 14, // Customize the font size
fontFamily: 'DM Sans, sans-serif' // Customize the font family
}
},
// Customize the legend margin
layout: 'horizontal', // or 'vertical'
offsetY: 8 // Vertical margin
}
}
return (
<div >
<DualAxes {...config} className="w-full" />
</div>
)
}
export default DemoDualAxes
here is my code I tried my best to show these labels in KMB I got but chart renders incorrect then I am using antV charts and their configuration is a little tricky because mostly things are in Chinese so its difficult to get it. i am using cube js you can provide your own data and fields for x-axis and y-axis
Upvotes: 1
Views: 23