highcharts / node-export-server

Highcharts Node.js export server
Other
354 stars 260 forks source link

Axis label is not getting translated as per selected lang options #493

Closed satyam20satyam closed 6 months ago

satyam20satyam commented 6 months ago

Axis label is not getting translated as per selected lang.

I am passing below body into the request

{
  "options": {
  "lang": {
    "thousandsSep": ",",
    "month": [
      " 1 月",
      " 2 月",
      " 3 月",
      " 4 月",
      " 5 月",
      " 6 月",
      " 7 月",
      " 8 月",
      " 9 月",
      " 10 月",
      " 11 月",
      " 12 月"
    ],
    "shortMonths": [
      " 1 月",
      " 2 月",
      " 3 月",
      " 4 月",
      " 5 月",
      " 6 月",
      " 7 月",
      " 8 月",
      " 9 月",
      " 10 月",
      " 11 月",
      " 12 月"
    ],
    "weekdays": [
      "星期日",
      " 星期一",
      " 星期二",
      " 星期三",
      " 星期四",
      " 星期五",
      " 星期六"
    ],
    "shortWeekdays": [
      "周日",
      " 周一",
      " 周二",
      " 周三",
      " 周四",
      " 周五",
      " 周六"
    ],
    "decimalPoint": "."
  },
  "chart": {
    "type": "area"
  },
  "title": {
    "text": "设备总体趋势",
    "useHTML": true,
    "align": "center",
    "style": {
      "color": "#333333",
      "fontSize": "16px",
      "fontFamily": "Roboto",
      "fontWeight": "bold",
      "textTransform": "CAPITALIZE"
    }
  },
  "yAxis": {
    "lineWidth": 0,
    "allowDecimals": false,
    "title": {
      "enabled": false
    },
    "opposite": true,
    "labels": {
      "format": "{value}"
    }
  },
  "xAxis": {
    "type": "datetime",
    "tickPixelInterval": 1,
    "dateTimeLabelFormats": {
      "hour": "%I <br> %p",
      "day": "%e <br> %b",
      "month": "%b <br> %Y"
    },
    "lineWidth": 1,
    "lineColor": "#C0C0C0",
    "tickLength": 1,
    "tickWidth": 1
  },
  "legend": {
    "align": "center",
    "verticalAlign": "bottom",
    "layout": "horizontal",
    "symbolWidth": 4,
    "itemDistance": 30,
    "symbolPadding": 10,
    "symbolRadius": 0,
    "itemStyle": {
      "color": "#000000",
      "fontWeight": "normal",
      "fontFamily": "Roboto"
    }
  },
  "plotOptions": {
    "area": {
      "stacking": "normal",
      "lineColor": "#666666",
      "lineWidth": 1,
      "borderRadius": 0,
      "marker": {
        "lineWidth": 1,
        "lineColor": "#666666"
      },
      "events": {}
    }
  },
  "series": [
    {
      "name": "现场推测",
      "data": [
        [
          1677628800000,
          15968
        ],
        [
          1680307200000,
          16026
        ],
        [
          1682899200000,
          15801
        ],
        [
          1685577600000,
          15773
        ],
        [
          1688169600000,
          15821
        ],
        [
          1690848000000,
          9167
        ],
        [
          1693526400000,
          9251
        ],
        [
          1696118400000,
          9278
        ],
        [
          1698796800000,
          9302
        ],
        [
          1701388800000,
          9300
        ],
        [
          1704067200000,
          9400
        ],
        [
          1706745600000,
          9608
        ]
      ],
      "color": "#66FFFF",
      "marker": {
        "symbol": "square",
        "radius": 4
      }
    },
    {
      "name": "入站到客户",
      "data": [
        [
          1677628800000,
          16
        ],
        [
          1680307200000,
          0
        ],
        [
          1682899200000,
          47
        ],
        [
          1685577600000,
          30
        ],
        [
          1688169600000,
          10
        ],
        [
          1690848000000,
          28
        ],
        [
          1693526400000,
          15
        ],
        [
          1696118400000,
          34
        ],
        [
          1698796800000,
          28
        ],
        [
          1701388800000,
          0
        ],
        [
          1704067200000,
          33
        ],
        [
          1706745600000,
          31
        ]
      ],
      "color": "#E66268",
      "marker": {
        "symbol": "square",
        "radius": 4
      }
    },
    {
      "name": "操作中",
      "data": [
        [
          1677628800000,
          16
        ],
        [
          1680307200000,
          10
        ],
        [
          1682899200000,
          0
        ],
        [
          1685577600000,
          0
        ],
        [
          1688169600000,
          0
        ],
        [
          1690848000000,
          4
        ],
        [
          1693526400000,
          5
        ],
        [
          1696118400000,
          7
        ],
        [
          1698796800000,
          5
        ],
        [
          1701388800000,
          7
        ],
        [
          1704067200000,
          6
        ],
        [
          1706745600000,
          6
        ]
      ],
      "color": "#005A82",
      "marker": {
        "symbol": "square",
        "radius": 4
      }
    },
    {
      "name": "维修中",
      "data": [
        [
          1677628800000,
          96
        ],
        [
          1680307200000,
          110
        ],
        [
          1682899200000,
          47
        ],
        [
          1685577600000,
          76
        ],
        [
          1688169600000,
          93
        ],
        [
          1690848000000,
          103
        ],
        [
          1693526400000,
          151
        ],
        [
          1696118400000,
          70
        ],
        [
          1698796800000,
          91
        ],
        [
          1701388800000,
          122
        ],
        [
          1704067200000,
          75
        ],
        [
          1706745600000,
          97
        ]
      ],
      "color": "#333333",
      "marker": {
        "symbol": "square",
        "radius": 4
      }
    }
  ],
  "tooltip": {
    "shared": true,
    "dateTimeLabelFormats": {
      "hour": "%I %p",
      "day": "%b %e, %Y ",
      "month": "%b %Y"
    },
    "useHTML": true,
    "borderWidth": 1,
    "borderColor": "#007CB0",
    "style": {
      "padding": 5
    }
  }
}
}

Expected behaviour

Axis is not getting translated image

Actual behaviour

Axis also should get translated

Reproduction steps

jszuminski commented 6 months ago

Thanks for reporting!

This does not, however, seem to be a problem with the Export Server, but with the Highcharts itself. It can be reproduced in Vanilla JS without the exporting module at all: https://jsfiddle.net/BlackLabel/upwLa7kx/

You can create a new issue on the highcharts repository here: https://github.com/highcharts/highcharts/issues/new/choose

sn2247 commented 6 months ago

Thanks for reporting!

This does not, however, seem to be a problem with the Export Server, but with the Highcharts itself. It can be reproduced in Vanilla JS without the exporting module at all: https://jsfiddle.net/BlackLabel/upwLa7kx/

You can create a new issue on the highcharts repository here: https://github.com/highcharts/highcharts/issues/new/choose

https://github.com/highcharts/node-export-server/issues/494 We are using npm package highcharts-export-server in our express based server. Axis label is not getting translated as per selected lang, this is same as which is fixed and released in 3.0.3 version but while we are using version 3.0.3 or above, we are getting error while starting the server. We drilled more into the code and found it is happening because coreScript is undefined. TypeError: Cannot read properties of undefined (reading 'map').

After that server got started with this above error and we tried to export the chart and got another error

Tue Mar 19 2024 23:06:31 GMT+0530 [verbose] - [chart] Starting exporting process.
Tue Mar 19 2024 23:06:31 GMT+0530 [verbose] - [chart] Attempting to export from a raw input.
TypeError: Cannot read properties of undefined (reading 'allowCodeExecution')

This is the request body we are passing and below are the configurations.

NODE_TLS_REJECT_UNAUTHORIZED=0
ACCEPT_HIGHCHARTS_LICENSE=1
HIGHCHARTS_ALLOW_CODE_EXECUTION=1
HIGHCHARTS_ALLOW_FILE_RESOURCES=1
HIGHCHARTS_LOG_LEVEL=2
await exporter.initPool({
    maxWorkers: 5,
    initialWorkers: 5,
    workLimit: 50,
    customCode: { allowCodeExecution: true, allowFileResources: true },
  });

The same configuration is working fine in npm highcharts-export-server v3.0.1 with translation issue.