Theme not rendering from Json

mgrazianoc commented 3 years ago

Expected Behaviour

Apply the vintage theme for the charts, given the default vintage json provided by the theme builder .

Actual Behaviour

The graph loads normally, but the theme is not applied.

Steps to reproduce

just run the following snippets:

Config.js

import {registerTheme} from 'echarts';
import themeJson from './theme.json'

export function setTheme(name){

  const theme = loadData(themeJson)

  registerTheme(loadData(theme), name);
}

const loadData = (data) => JSON.parse(JSON.stringify(data));

Panel.js

import React, { Component } from 'react'

import ReactEcharts from 'echarts-for-react';

import {mockData, setTheme} from './Config';
import { CandleChart } from './Charts';

export default class Panel extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: mockData(),
            size: {height: '500px', width: '100%'},
            themeName: "vintage",
        };

        setTheme(this.state.themeName);
   }

    render() {
        return (
            <div>
                <ReactEcharts
                    option={CandleChart(this.state.data)}
                    style={{height: this.state.size.height, width: this.state.size.width}}
                    theme={this.state.themeName}
                    className={'react_for_echarts'}
                />
            </div>
        )
    }
}

Chart.js

import {calculateMA} from './Statistics';

export function CandleChart(data) {

    const MA5 = calculateMA(5, data)
    const MA15 = calculateMA(15, data)
    const MA30 = calculateMA(30, data)
    const MA60 = calculateMA(60, data)

    return {
        title: {
            text: 'Stock',
            left: 0
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: ['Stock', 'MA5', 'MA15', 'MA30', 'MA60']
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: data.categoryData,
            scale: true,
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
        },
        yAxis: {
            scale: true
        },
        dataZoom: [
            {
                type: 'inside',
                start: 90,
                end: 100
            },
            {
                show: true,
                type: 'slider',
                top: '90%',
                start: 90,
                end: 100
            }
        ],
        series: [
            {
                name: 'Stock',
                type: 'candlestick',
                data: data.values,
                markPoint: {
                    label: {
                        normal: {
                            formatter: function (param) {
                                return param != null ? param.value : '';
                            }
                        }
                    },
                    data: [
                        {
                            name: 'highest value',
                            type: 'max',
                            valueDim: 'highest'
                        },
                        {
                            name: 'lowest value',
                            type: 'min',
                            valueDim: 'lowest'
                        },
                        {
                            name: 'average value on close',
                            type: 'average',
                            valueDim: 'close'
                        }
                    ],
                    tooltip: {
                        formatter: function (param) {
                            return param.name + '<br>' + (param.data.coord || '');
                        }
                    }
                },
                markLine: {
                    symbol: ['none', 'none'],
                    data: [
                        [
                            {
                                name: 'from lowest to highest',
                                type: 'min',
                                valueDim: 'lowest',
                                symbol: 'circle',
                                symbolSize: 10,
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            {
                                type: 'max',
                                valueDim: 'highest',
                                symbol: 'circle',
                                symbolSize: 10,
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: false
                                    }
                                }
                            }
                        ],
                        {
                            name: 'min line on close',
                            type: 'min',
                            valueDim: 'close'
                        },
                        {
                            name: 'max line on close',
                            type: 'max',
                            valueDim: 'close'
                        }
                    ]
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: MA5,
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA15',
                type: 'line',
                data: MA15,
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: MA30,
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA60',
                type: 'line',
                data: MA60,
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },

        ]
    };

}