@operato/chart 7.0.15 → 7.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/src/chartjs/ox-chart-js.d.ts +0 -1
  3. package/dist/src/chartjs/ox-chart-js.js +12 -1
  4. package/dist/src/chartjs/ox-chart-js.js.map +1 -1
  5. package/dist/src/editors/input-chart-abstract.d.ts +2 -2
  6. package/dist/src/editors/input-chart-abstract.js +282 -259
  7. package/dist/src/editors/input-chart-abstract.js.map +1 -1
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +2 -2
  10. package/src/chartjs/ox-chart-js.ts +14 -1
  11. package/src/editors/input-chart-abstract.ts +343 -313
  12. package/src/types.d.ts +3 -0
  13. package/translations/en.json +3 -0
  14. package/translations/ja.json +3 -0
  15. package/translations/ko.json +3 -0
  16. package/translations/ms.json +3 -0
  17. package/translations/zh.json +3 -0
package/dist/src/editors/input-chart-abstract.js CHANGED
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
2
2
  import '@operato/i18n/ox-i18n.js';
3
3
  import { html } from 'lit';
4
4
  import { property, query } from 'lit/decorators.js';
5
+ import { keyed } from 'lit/directives/keyed.js';
5
6
  import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
6
7
  import { InputChartStyles } from './input-chart-styles';
7
8
  import { Configurer } from './configurer';
@@ -135,7 +136,7 @@ export class InputChartAbstract extends OxFormField {
135
136
  value-key="series.defaultFontSize"
136
137
  value=${configurer.series.defaultFontSize || 10}
137
138
  />
138
- <label for="data-label-anchor"> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
139
+ <label for="data-label-anchor"> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
139
140
  <select
140
141
  id="data-label-anchor"
141
142
  value-key="series.dataLabelAnchor"
@@ -145,6 +146,20 @@ export class InputChartAbstract extends OxFormField {
145
146
  <option value="center" selected>Center</option>
146
147
  <option value="end">End</option>
147
148
  </select>
149
+ <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
150
+ <input
151
+ id="data-label-offset"
152
+ type="number"
153
+ value-key="series.dataLabelOffset"
154
+ value=${configurer.series.dataLabelOffset || 0}
155
+ />
156
+ <label for="data-label-rotation"> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
157
+ <input
158
+ id="data-label-rotation"
159
+ type="number"
160
+ value-key="series.dataLabelRotation"
161
+ value=${configurer.series.dataLabelRotation || 0}
162
+ />
148
163
  `
149
164
  : html ``}
150
165
  `;
@@ -320,323 +335,331 @@ export class InputChartAbstract extends OxFormField {
320
335
  annotationsTabTemplate() {
321
336
  const configurer = this.configurer;
322
337
  const currentAnnotation = configurer.annotations[configurer.currentAnnotationIndex] || {};
323
- return html `
324
- <div id="annotations-properties-container" fullwidth>
325
- <div id="annotations-tab-header">
326
- <md-icon
327
- id="annotations-tab-nav-left-button"
328
- @tap=${(e) => {
338
+ return keyed(configurer.currentAnnotationIndex, html `
339
+ <div id="annotations-properties-container" fullwidth>
340
+ <div id="annotations-tab-header">
341
+ <md-icon
342
+ id="annotations-tab-nav-left-button"
343
+ @tap=${(e) => {
329
344
  this._onTabScrollNavLeft(e, 'annotations');
330
345
  }}
331
- disabled
332
- >chevron_left</md-icon
333
- >
334
- <div
335
- id="annotations-tabs"
336
- @change=${(e) => {
346
+ disabled
347
+ >chevron_left</md-icon
348
+ >
349
+ <div
350
+ id="annotations-tabs"
351
+ @change=${(e) => {
337
352
  configurer.currentAnnotationIndex = e.target.activeTabIndex;
338
353
  }}
339
- active-tab-index=${configurer.currentAnnotationIndex}
340
- fit-container
341
- >
342
- ${configurer.annotations.map((annotation, index) => html `
343
- <div
344
- data-annotation=${index + 1}
345
- data-tab-index=${index}
346
- tab
347
- ?selected=${index == configurer.currentAnnotationIndex}
348
- @click=${(e) => {
354
+ active-tab-index=${configurer.currentAnnotationIndex}
355
+ fit-container
356
+ >
357
+ ${configurer.annotations.map((annotation, index) => html `
358
+ <div
359
+ data-annotation=${index + 1}
360
+ data-tab-index=${index}
361
+ tab
362
+ ?selected=${index == configurer.currentAnnotationIndex}
363
+ @click=${(e) => {
349
364
  const target = e.target;
350
365
  this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')));
351
366
  this.value = { ...this.configurer.value };
352
367
  }}
353
- >
354
- ${index + 1}
355
- ${!configurer.annotations ||
368
+ >
369
+ ${index + 1}
370
+ ${!configurer.annotations ||
356
371
  (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
357
- ? html ` <md-icon @tap=${(e) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon> `
372
+ ? html `
373
+ <md-icon @tap=${(e) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon>
374
+ `
358
375
  : html ``}
359
- </div>
360
- `)}
361
- </div>
362
- <md-icon
363
- id="annotations-tab-nav-right-button"
364
- @click=${(e) => {
376
+ </div>
377
+ `)}
378
+ </div>
379
+ <md-icon
380
+ id="annotations-tab-nav-right-button"
381
+ @click=${(e) => {
365
382
  this._onTabScrollNavRight(e, 'annotations');
366
383
  }}
367
- disabled
368
- >chevron_right</md-icon
369
- >
370
- </div>
371
- <div id="add-annotation-button-container">
372
- <md-icon id="add-annotation-button" @tap=${(e) => this.onTapAddAnnotation(e)}>add</md-icon>
373
- </div>
384
+ disabled
385
+ >chevron_right</md-icon
386
+ >
387
+ </div>
388
+ <div id="add-annotation-button-container">
389
+ <md-icon id="add-annotation-button" @tap=${(e) => this.onTapAddAnnotation(e)}>add</md-icon>
390
+ </div>
374
391
 
375
- <div class="tab-content">
376
- <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
377
- <select
378
- id="annotation-type"
379
- class="select-content"
380
- value-key="annotation.type"
381
- .value=${currentAnnotation.type || ''}
382
- >
383
- <option value="line">Line</option>
384
- <option value="text">Text</option>
385
- <option value="box">Box</option>
386
- <option value="horizontalLine">Horizontal Line</option>
387
- <option value="verticalLine">Vertical Line</option>
388
- <option value="custom">Custom</option>
389
- </select>
392
+ <div class="tab-content">
393
+ <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
394
+ <select
395
+ id="annotation-type"
396
+ class="select-content"
397
+ value-key="annotation.type"
398
+ .value=${currentAnnotation.type || ''}
399
+ >
400
+ <option value="line">Line</option>
401
+ <option value="text">Text</option>
402
+ <option value="box">Box</option>
403
+ <option value="horizontalLine">Horizontal Line</option>
404
+ <option value="verticalLine">Vertical Line</option>
405
+ <option value="custom">Custom</option>
406
+ </select>
390
407
 
391
- <label for="annotation-x1">X1</label>
392
- <input
393
- id="annotation-x1"
394
- type="number"
395
- value-key="annotation.x1"
396
- .value=${String(currentAnnotation.x1 || 0)}
397
- />
408
+ <label for="annotation-x1">X1</label>
409
+ <input
410
+ id="annotation-x1"
411
+ type="number"
412
+ value-key="annotation.x1"
413
+ .value=${String(currentAnnotation.x1 || 0)}
414
+ />
398
415
 
399
- <label for="annotation-y1">Y1</label>
400
- <input
401
- id="annotation-y1"
402
- type="number"
403
- value-key="annotation.y1"
404
- .value=${String(currentAnnotation.y1 || 0)}
405
- />
416
+ <label for="annotation-y1">Y1</label>
417
+ <input
418
+ id="annotation-y1"
419
+ type="number"
420
+ value-key="annotation.y1"
421
+ .value=${String(currentAnnotation.y1 || 0)}
422
+ />
406
423
 
407
- <label for="annotation-x2">X2</label>
408
- <input
409
- id="annotation-x2"
410
- type="number"
411
- value-key="annotation.x2"
412
- .value=${String(currentAnnotation.x2 || 0)}
413
- />
424
+ <label for="annotation-x2">X2</label>
425
+ <input
426
+ id="annotation-x2"
427
+ type="number"
428
+ value-key="annotation.x2"
429
+ .value=${String(currentAnnotation.x2 || 0)}
430
+ />
414
431
 
415
- <label for="annotation-y2">Y2</label>
416
- <input
417
- id="annotation-y2"
418
- type="number"
419
- value-key="annotation.y2"
420
- .value=${String(currentAnnotation.y2 || 0)}
421
- />
432
+ <label for="annotation-y2">Y2</label>
433
+ <input
434
+ id="annotation-y2"
435
+ type="number"
436
+ value-key="annotation.y2"
437
+ .value=${String(currentAnnotation.y2 || 0)}
438
+ />
422
439
 
423
- <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
424
- <ox-input-color
425
- id="annotation-stroke"
426
- value-key="annotation.stroke"
427
- .value=${currentAnnotation.stroke}
428
- ></ox-input-color>
440
+ <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
441
+ <ox-input-color
442
+ id="annotation-stroke"
443
+ value-key="annotation.stroke"
444
+ .value=${currentAnnotation.stroke}
445
+ ></ox-input-color>
429
446
 
430
- <label for="annotation-stroke-thickness">
431
- <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
432
- </label>
433
- <input
434
- id="annotation-stroke-thickness"
435
- type="number"
436
- value-key="annotation.strokeThickness"
437
- .value=${String(currentAnnotation.strokeThickness || 1)}
438
- />
447
+ <label for="annotation-stroke-thickness">
448
+ <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
449
+ </label>
450
+ <input
451
+ id="annotation-stroke-thickness"
452
+ type="number"
453
+ value-key="annotation.strokeThickness"
454
+ .value=${String(currentAnnotation.strokeThickness || 1)}
455
+ />
439
456
 
440
- <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
441
- <ox-input-color
442
- id="annotation-fill"
443
- value-key="annotation.fill"
444
- .value=${currentAnnotation.fill}
445
- ></ox-input-color>
457
+ <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
458
+ <ox-input-color
459
+ id="annotation-fill"
460
+ value-key="annotation.fill"
461
+ .value=${currentAnnotation.fill}
462
+ ></ox-input-color>
446
463
 
447
- <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
448
- <input id="annotation-text" type="text" value-key="annotation.text" .value=${currentAnnotation.text || ''} />
464
+ <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
465
+ <input
466
+ id="annotation-text"
467
+ type="text"
468
+ value-key="annotation.text"
469
+ .value=${currentAnnotation.text || ''}
470
+ />
449
471
 
450
- <label for="annotation-horizontal-anchor">
451
- <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
452
- </label>
453
- <select
454
- id="annotation-horizontal-anchor"
455
- class="select-content"
456
- value-key="annotation.horizontalAnchorPoint"
457
- .value=${currentAnnotation.horizontalAnchorPoint || ''}
458
- >
459
- <option value="Left">Left</option>
460
- <option value="Center">Center</option>
461
- <option value="Right">Right</option>
462
- </select>
472
+ <label for="annotation-horizontal-anchor">
473
+ <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
474
+ </label>
475
+ <select
476
+ id="annotation-horizontal-anchor"
477
+ class="select-content"
478
+ value-key="annotation.horizontalAnchorPoint"
479
+ .value=${currentAnnotation.horizontalAnchorPoint || ''}
480
+ >
481
+ <option value="Left">Left</option>
482
+ <option value="Center">Center</option>
483
+ <option value="Right">Right</option>
484
+ </select>
463
485
 
464
- <label for="annotation-vertical-anchor">
465
- <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
466
- </label>
467
- <select
468
- id="annotation-vertical-anchor"
469
- class="select-content"
470
- value-key="annotation.verticalAnchorPoint"
471
- .value=${currentAnnotation.verticalAnchorPoint || ''}
472
- >
473
- <option value="Top">Top</option>
474
- <option value="Center">Center</option>
475
- <option value="Bottom">Bottom</option>
476
- </select>
486
+ <label for="annotation-vertical-anchor">
487
+ <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
488
+ </label>
489
+ <select
490
+ id="annotation-vertical-anchor"
491
+ class="select-content"
492
+ value-key="annotation.verticalAnchorPoint"
493
+ .value=${currentAnnotation.verticalAnchorPoint || ''}
494
+ >
495
+ <option value="Top">Top</option>
496
+ <option value="Center">Center</option>
497
+ <option value="Bottom">Bottom</option>
498
+ </select>
499
+ </div>
477
500
  </div>
478
- </div>
479
- `;
501
+ `);
480
502
  }
481
503
  multiSeriesTabTemplate() {
482
504
  const configurer = this.configurer;
483
- return html `
484
- <div id="series-properties-container" fullwidth>
485
- <div id="series-tab-header">
486
- <md-icon
487
- id="series-tab-nav-left-button"
488
- @tap=${(e) => {
505
+ return keyed(configurer.currentSeriesIndex, html `
506
+ <div id="series-properties-container" fullwidth>
507
+ <div id="series-tab-header">
508
+ <md-icon
509
+ id="series-tab-nav-left-button"
510
+ @tap=${(e) => {
489
511
  this._onTabScrollNavLeft(e, 'series');
490
512
  }}
491
- disabled
492
- >chevron_left</md-icon
493
- >
494
- <div
495
- id="series-tabs"
496
- @change=${(e) => {
513
+ disabled
514
+ >chevron_left</md-icon
515
+ >
516
+ <div
517
+ id="series-tabs"
518
+ @change=${(e) => {
497
519
  configurer.currentSeriesIndex = e.target.activeTabIndex;
498
520
  }}
499
- active-tab-index=${configurer.currentSeriesIndex}
500
- fit-container
501
- >
502
- ${configurer.datasets.map((dataset, index) => html `
503
- <div
504
- data-series=${index + 1}
505
- data-tab-index=${index}
506
- tab
507
- ?selected=${index == configurer.currentSeriesIndex}
508
- @click=${(e) => {
521
+ active-tab-index=${configurer.currentSeriesIndex}
522
+ fit-container
523
+ >
524
+ ${configurer.datasets.map((dataset, index) => html `
525
+ <div
526
+ data-series=${index + 1}
527
+ data-tab-index=${index}
528
+ tab
529
+ ?selected=${index == configurer.currentSeriesIndex}
530
+ @click=${(e) => {
509
531
  const target = e.target;
510
532
  this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')));
511
533
  this.value = { ...this.configurer.value };
512
534
  }}
513
- >
514
- ${index + 1}
515
- ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
535
+ >
536
+ ${index + 1}
537
+ ${!configurer.datasets ||
538
+ (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
516
539
  ? html ` <md-icon @tap=${(e) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
517
540
  : html ``}
518
- </div>
519
- `)}
520
- </div>
521
- <md-icon
522
- id="series-tab-nav-right-button"
523
- @click=${(e) => {
541
+ </div>
542
+ `)}
543
+ </div>
544
+ <md-icon
545
+ id="series-tab-nav-right-button"
546
+ @click=${(e) => {
524
547
  this._onTabScrollNavRight(e, 'series');
525
548
  }}
526
- disabled
527
- >chevron_right</md-icon
528
- >
529
- </div>
530
- <div id="add-series-button-container">
531
- <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
532
- </div>
549
+ disabled
550
+ >chevron_right</md-icon
551
+ >
552
+ </div>
553
+ <div id="add-series-button-container">
554
+ <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
555
+ </div>
533
556
 
534
- <div class="tab-content">
535
- <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
536
- <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
557
+ <div class="tab-content">
558
+ <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
559
+ <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
537
560
 
538
- ${this.chartType == 'line' || this.chartType == 'bar'
561
+ ${this.chartType == 'line' || this.chartType == 'bar'
539
562
  ? html `
540
- <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
541
- <select
542
- id="series-type"
543
- class="select-content"
544
- value-key="series.type"
545
- .value=${configurer.series.type || ''}
546
- >
547
- <option value="bar" selected>Bar</option>
548
- <option value="line">Line</option>
549
- </select>
550
- `
563
+ <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
564
+ <select
565
+ id="series-type"
566
+ class="select-content"
567
+ value-key="series.type"
568
+ .value=${configurer.series.type || ''}
569
+ >
570
+ <option value="bar" selected>Bar</option>
571
+ <option value="line">Line</option>
572
+ </select>
573
+ `
551
574
  : html ``}
552
575
 
553
- <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
554
- <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
576
+ <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
577
+ <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
555
578
 
556
- ${configurer.series.type == 'line'
579
+ ${configurer.series.type == 'line'
557
580
  ? html `
558
- <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
559
- <select
560
- id="series-line-tension"
561
- class="select-content"
562
- value-key="series.lineTension"
563
- .value=${String(configurer.series.lineTension || 0)}
564
- >
565
- <option value="0.4">Smooth</option>
566
- <option value="0">Angled</option>
567
- </select>
568
- `
581
+ <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
582
+ <select
583
+ id="series-line-tension"
584
+ class="select-content"
585
+ value-key="series.lineTension"
586
+ .value=${String(configurer.series.lineTension || 0)}
587
+ >
588
+ <option value="0.4">Smooth</option>
589
+ <option value="0">Angled</option>
590
+ </select>
591
+ `
569
592
  : html ``}
570
- ${configurer.series.type == 'line'
593
+ ${configurer.series.type == 'line'
571
594
  ? html `
572
- <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
573
- <input
574
- id="series-border-width"
575
- type="number"
576
- value-key="series.borderWidth"
577
- .value=${String(configurer.series.borderWidth || 0)}
578
- />
579
- `
595
+ <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
596
+ <input
597
+ id="series-border-width"
598
+ type="number"
599
+ value-key="series.borderWidth"
600
+ .value=${String(configurer.series.borderWidth || 0)}
601
+ />
602
+ `
580
603
  : html ``}
581
604
 
582
- <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
583
- <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
605
+ <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
606
+ <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
584
607
 
585
- ${configurer.series.type == 'line'
608
+ ${configurer.series.type == 'line'
586
609
  ? html `
587
- <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
588
- <select
589
- id="series-point-style"
590
- class="select-content"
591
- value-key="series.pointStyle"
592
- .value=${configurer.series.pointStyle || ''}
593
- >
594
- <option value="">&nbsp;</option>
595
- <option value="circle">⚬</option>
596
- <option value="triangle">▵</option>
597
- <option value="rect">□</option>
598
- <option value="rectRot">◇</option>
599
- <option value="cross">+</option>
600
- <option value="crossRot">⨉</option>
601
- <option value="star">✱</option>
602
- <option value="line">―</option>
603
- <option value="dash">┄</option>
604
- </select>
610
+ <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
611
+ <select
612
+ id="series-point-style"
613
+ class="select-content"
614
+ value-key="series.pointStyle"
615
+ .value=${configurer.series.pointStyle || ''}
616
+ >
617
+ <option value="">&nbsp;</option>
618
+ <option value="circle">⚬</option>
619
+ <option value="triangle">▵</option>
620
+ <option value="rect">□</option>
621
+ <option value="rectRot">◇</option>
622
+ <option value="cross">+</option>
623
+ <option value="crossRot">⨉</option>
624
+ <option value="star">✱</option>
625
+ <option value="line">―</option>
626
+ <option value="dash">┄</option>
627
+ </select>
605
628
 
606
- <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
607
- <input
608
- id="series-point-radius"
609
- type="number"
610
- value-key="series.pointRadius"
611
- .value=${String(configurer.series.pointRadius || 0)}
612
- />
613
- `
629
+ <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
630
+ <input
631
+ id="series-point-radius"
632
+ type="number"
633
+ value-key="series.pointRadius"
634
+ .value=${String(configurer.series.pointRadius || 0)}
635
+ />
636
+ `
614
637
  : html ``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
615
- <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
616
- ${configurer.series.type == 'line'
638
+ <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
639
+ ${configurer.series.type == 'line'
617
640
  ? html `
618
- <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
619
- <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
620
- `
641
+ <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
642
+ <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
643
+ `
621
644
  : html ``}
622
- ${configurer.multiAxis
645
+ ${configurer.multiAxis
623
646
  ? html `
624
- <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
625
- <select
626
- id="series-y-axis-id"
627
- class="select-content"
628
- value-key="series.yAxisID"
629
- .value=${configurer.series.yAxisID || ''}
630
- >
631
- <option value="left">Left</option>
632
- <option value="right">Right</option>
633
- </select>
634
- `
647
+ <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
648
+ <select
649
+ id="series-y-axis-id"
650
+ class="select-content"
651
+ value-key="series.yAxisID"
652
+ .value=${configurer.series.yAxisID || ''}
653
+ >
654
+ <option value="left">Left</option>
655
+ <option value="right">Right</option>
656
+ </select>
657
+ `
635
658
  : html ``}
636
- ${this.displayValueTemplate()}
659
+ ${this.displayValueTemplate()}
660
+ </div>
637
661
  </div>
638
- </div>
639
- `;
662
+ `);
640
663
  }
641
664
  _onTabScroll(e, type) {
642
665
  let tabContainer;