@operato/chart 7.0.16 → 7.0.18

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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/src/editors/input-chart-abstract.d.ts +2 -2
  3. package/dist/src/editors/input-chart-abstract.js +270 -260
  4. package/dist/src/editors/input-chart-abstract.js.map +1 -1
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +2 -2
  7. package/src/editors/input-chart-abstract.ts +331 -314
package/src/editors/input-chart-abstract.ts CHANGED
@@ -2,6 +2,8 @@ import '@operato/i18n/ox-i18n.js'
2
2
 
3
3
  import { html, PropertyValues } from 'lit'
4
4
  import { property, query } from 'lit/decorators.js'
5
+ import { keyed } from 'lit/directives/keyed.js'
6
+
5
7
  import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
6
8
  import { MdIcon } from '@material/web/icon/icon.js'
7
9
 
@@ -162,10 +164,11 @@ export class InputChartAbstract extends OxFormField {
162
164
  <select
163
165
  id="data-label-anchor"
164
166
  value-key="series.dataLabelAnchor"
165
- value=${configurer.series.dataLabelAnchor || 'center'}
167
+ .value=${configurer.series.dataLabelAnchor || 'center'}
166
168
  >
169
+ <option value=""></option>
167
170
  <option value="start">Start</option>
168
- <option value="center" selected>Center</option>
171
+ <option value="center">Center</option>
169
172
  <option value="end">End</option>
170
173
  </select>
171
174
  <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
@@ -403,329 +406,343 @@ export class InputChartAbstract extends OxFormField {
403
406
  const configurer = this.configurer
404
407
  const currentAnnotation = configurer.annotations[configurer.currentAnnotationIndex] || {}
405
408
 
406
- return html`
407
- <div id="annotations-properties-container" fullwidth>
408
- <div id="annotations-tab-header">
409
- <md-icon
410
- id="annotations-tab-nav-left-button"
411
- @tap=${(e: Event) => {
412
- this._onTabScrollNavLeft(e, 'annotations')
413
- }}
414
- disabled
415
- >chevron_left</md-icon
416
- >
417
- <div
418
- id="annotations-tabs"
419
- @change=${(e: Event) => {
420
- configurer.currentAnnotationIndex = (e.target as any).activeTabIndex
421
- }}
422
- active-tab-index=${configurer.currentAnnotationIndex}
423
- fit-container
424
- >
425
- ${configurer.annotations!.map(
426
- (annotation: any, index: number) => html`
427
- <div
428
- data-annotation=${index + 1}
429
- data-tab-index=${index}
430
- tab
431
- ?selected=${index == configurer.currentAnnotationIndex}
432
- @click=${(e: Event) => {
433
- const target = e.target as HTMLDivElement
434
- this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')))
435
- this.value = { ...this.configurer.value }
436
- }}
437
- >
438
- ${index + 1}
439
- ${!configurer.annotations ||
440
- (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
441
- ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon> `
442
- : html``}
443
- </div>
444
- `
445
- )}
409
+ return keyed(
410
+ configurer.currentAnnotationIndex,
411
+ html`
412
+ <div id="annotations-properties-container" fullwidth>
413
+ <div id="annotations-tab-header">
414
+ <md-icon
415
+ id="annotations-tab-nav-left-button"
416
+ @tap=${(e: Event) => {
417
+ this._onTabScrollNavLeft(e, 'annotations')
418
+ }}
419
+ disabled
420
+ >chevron_left</md-icon
421
+ >
422
+ <div
423
+ id="annotations-tabs"
424
+ @change=${(e: Event) => {
425
+ configurer.currentAnnotationIndex = (e.target as any).activeTabIndex
426
+ }}
427
+ active-tab-index=${configurer.currentAnnotationIndex}
428
+ fit-container
429
+ >
430
+ ${configurer.annotations!.map(
431
+ (annotation: any, index: number) => html`
432
+ <div
433
+ data-annotation=${index + 1}
434
+ data-tab-index=${index}
435
+ tab
436
+ ?selected=${index == configurer.currentAnnotationIndex}
437
+ @click=${(e: Event) => {
438
+ const target = e.target as HTMLDivElement
439
+ this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')))
440
+ this.value = { ...this.configurer.value }
441
+ }}
442
+ >
443
+ ${index + 1}
444
+ ${!configurer.annotations ||
445
+ (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
446
+ ? html`
447
+ <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon>
448
+ `
449
+ : html``}
450
+ </div>
451
+ `
452
+ )}
453
+ </div>
454
+ <md-icon
455
+ id="annotations-tab-nav-right-button"
456
+ @click=${(e: Event) => {
457
+ this._onTabScrollNavRight(e, 'annotations')
458
+ }}
459
+ disabled
460
+ >chevron_right</md-icon
461
+ >
446
462
  </div>
447
- <md-icon
448
- id="annotations-tab-nav-right-button"
449
- @click=${(e: Event) => {
450
- this._onTabScrollNavRight(e, 'annotations')
451
- }}
452
- disabled
453
- >chevron_right</md-icon
454
- >
455
- </div>
456
- <div id="add-annotation-button-container">
457
- <md-icon id="add-annotation-button" @tap=${(e: Event) => this.onTapAddAnnotation(e)}>add</md-icon>
458
- </div>
463
+ <div id="add-annotation-button-container">
464
+ <md-icon id="add-annotation-button" @tap=${(e: Event) => this.onTapAddAnnotation(e)}>add</md-icon>
465
+ </div>
466
+
467
+ <div class="tab-content">
468
+ <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
469
+ <select
470
+ id="annotation-type"
471
+ class="select-content"
472
+ value-key="annotation.type"
473
+ .value=${currentAnnotation.type || ''}
474
+ >
475
+ <option value="line">Line</option>
476
+ <option value="text">Text</option>
477
+ <option value="box">Box</option>
478
+ <option value="horizontalLine">Horizontal Line</option>
479
+ <option value="verticalLine">Vertical Line</option>
480
+ <option value="custom">Custom</option>
481
+ </select>
482
+
483
+ <label for="annotation-x1">X1</label>
484
+ <input
485
+ id="annotation-x1"
486
+ type="number"
487
+ value-key="annotation.x1"
488
+ .value=${String(currentAnnotation.x1 || 0)}
489
+ />
490
+
491
+ <label for="annotation-y1">Y1</label>
492
+ <input
493
+ id="annotation-y1"
494
+ type="number"
495
+ value-key="annotation.y1"
496
+ .value=${String(currentAnnotation.y1 || 0)}
497
+ />
459
498
 
460
- <div class="tab-content">
461
- <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
462
- <select
463
- id="annotation-type"
464
- class="select-content"
465
- value-key="annotation.type"
466
- .value=${currentAnnotation.type || ''}
467
- >
468
- <option value="line">Line</option>
469
- <option value="text">Text</option>
470
- <option value="box">Box</option>
471
- <option value="horizontalLine">Horizontal Line</option>
472
- <option value="verticalLine">Vertical Line</option>
473
- <option value="custom">Custom</option>
474
- </select>
475
-
476
- <label for="annotation-x1">X1</label>
477
- <input
478
- id="annotation-x1"
479
- type="number"
480
- value-key="annotation.x1"
481
- .value=${String(currentAnnotation.x1 || 0)}
482
- />
483
-
484
- <label for="annotation-y1">Y1</label>
485
- <input
486
- id="annotation-y1"
487
- type="number"
488
- value-key="annotation.y1"
489
- .value=${String(currentAnnotation.y1 || 0)}
490
- />
491
-
492
- <label for="annotation-x2">X2</label>
493
- <input
494
- id="annotation-x2"
495
- type="number"
496
- value-key="annotation.x2"
497
- .value=${String(currentAnnotation.x2 || 0)}
498
- />
499
-
500
- <label for="annotation-y2">Y2</label>
501
- <input
502
- id="annotation-y2"
503
- type="number"
504
- value-key="annotation.y2"
505
- .value=${String(currentAnnotation.y2 || 0)}
506
- />
507
-
508
- <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
509
- <ox-input-color
510
- id="annotation-stroke"
511
- value-key="annotation.stroke"
512
- .value=${currentAnnotation.stroke}
513
- ></ox-input-color>
514
-
515
- <label for="annotation-stroke-thickness">
516
- <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
517
- </label>
518
- <input
519
- id="annotation-stroke-thickness"
520
- type="number"
521
- value-key="annotation.strokeThickness"
522
- .value=${String(currentAnnotation.strokeThickness || 1)}
523
- />
524
-
525
- <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
526
- <ox-input-color
527
- id="annotation-fill"
528
- value-key="annotation.fill"
529
- .value=${currentAnnotation.fill}
530
- ></ox-input-color>
531
-
532
- <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
533
- <input id="annotation-text" type="text" value-key="annotation.text" .value=${currentAnnotation.text || ''} />
534
-
535
- <label for="annotation-horizontal-anchor">
536
- <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
537
- </label>
538
- <select
539
- id="annotation-horizontal-anchor"
540
- class="select-content"
541
- value-key="annotation.horizontalAnchorPoint"
542
- .value=${currentAnnotation.horizontalAnchorPoint || ''}
543
- >
544
- <option value="Left">Left</option>
545
- <option value="Center">Center</option>
546
- <option value="Right">Right</option>
547
- </select>
548
-
549
- <label for="annotation-vertical-anchor">
550
- <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
551
- </label>
552
- <select
553
- id="annotation-vertical-anchor"
554
- class="select-content"
555
- value-key="annotation.verticalAnchorPoint"
556
- .value=${currentAnnotation.verticalAnchorPoint || ''}
557
- >
558
- <option value="Top">Top</option>
559
- <option value="Center">Center</option>
560
- <option value="Bottom">Bottom</option>
561
- </select>
499
+ <label for="annotation-x2">X2</label>
500
+ <input
501
+ id="annotation-x2"
502
+ type="number"
503
+ value-key="annotation.x2"
504
+ .value=${String(currentAnnotation.x2 || 0)}
505
+ />
506
+
507
+ <label for="annotation-y2">Y2</label>
508
+ <input
509
+ id="annotation-y2"
510
+ type="number"
511
+ value-key="annotation.y2"
512
+ .value=${String(currentAnnotation.y2 || 0)}
513
+ />
514
+
515
+ <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
516
+ <ox-input-color
517
+ id="annotation-stroke"
518
+ value-key="annotation.stroke"
519
+ .value=${currentAnnotation.stroke}
520
+ ></ox-input-color>
521
+
522
+ <label for="annotation-stroke-thickness">
523
+ <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
524
+ </label>
525
+ <input
526
+ id="annotation-stroke-thickness"
527
+ type="number"
528
+ value-key="annotation.strokeThickness"
529
+ .value=${String(currentAnnotation.strokeThickness || 1)}
530
+ />
531
+
532
+ <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
533
+ <ox-input-color
534
+ id="annotation-fill"
535
+ value-key="annotation.fill"
536
+ .value=${currentAnnotation.fill}
537
+ ></ox-input-color>
538
+
539
+ <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
540
+ <input
541
+ id="annotation-text"
542
+ type="text"
543
+ value-key="annotation.text"
544
+ .value=${currentAnnotation.text || ''}
545
+ />
546
+
547
+ <label for="annotation-horizontal-anchor">
548
+ <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
549
+ </label>
550
+ <select
551
+ id="annotation-horizontal-anchor"
552
+ class="select-content"
553
+ value-key="annotation.horizontalAnchorPoint"
554
+ .value=${currentAnnotation.horizontalAnchorPoint || ''}
555
+ >
556
+ <option value="Left">Left</option>
557
+ <option value="Center">Center</option>
558
+ <option value="Right">Right</option>
559
+ </select>
560
+
561
+ <label for="annotation-vertical-anchor">
562
+ <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
563
+ </label>
564
+ <select
565
+ id="annotation-vertical-anchor"
566
+ class="select-content"
567
+ value-key="annotation.verticalAnchorPoint"
568
+ .value=${currentAnnotation.verticalAnchorPoint || ''}
569
+ >
570
+ <option value="Top">Top</option>
571
+ <option value="Center">Center</option>
572
+ <option value="Bottom">Bottom</option>
573
+ </select>
574
+ </div>
562
575
  </div>
563
- </div>
564
- `
576
+ `
577
+ )
565
578
  }
566
579
 
567
580
  multiSeriesTabTemplate() {
568
581
  const configurer = this.configurer
569
582
 
570
- return html`
571
- <div id="series-properties-container" fullwidth>
572
- <div id="series-tab-header">
573
- <md-icon
574
- id="series-tab-nav-left-button"
575
- @tap=${(e: Event) => {
576
- this._onTabScrollNavLeft(e, 'series')
577
- }}
578
- disabled
579
- >chevron_left</md-icon
580
- >
581
- <div
582
- id="series-tabs"
583
- @change=${(e: Event) => {
584
- configurer.currentSeriesIndex = (e.target as any).activeTabIndex
585
- }}
586
- active-tab-index=${configurer.currentSeriesIndex}
587
- fit-container
588
- >
589
- ${configurer.datasets.map(
590
- (dataset: any, index: number) => html`
591
- <div
592
- data-series=${index + 1}
593
- data-tab-index=${index}
594
- tab
595
- ?selected=${index == configurer.currentSeriesIndex}
596
- @click=${(e: Event) => {
597
- const target = e.target as HTMLDivElement
598
- this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))
599
- this.value = { ...this.configurer.value }
600
- }}
601
- >
602
- ${index + 1}
603
- ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
604
- ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
605
- : html``}
606
- </div>
607
- `
608
- )}
583
+ return keyed(
584
+ configurer.currentSeriesIndex,
585
+ html`
586
+ <div id="series-properties-container" fullwidth>
587
+ <div id="series-tab-header">
588
+ <md-icon
589
+ id="series-tab-nav-left-button"
590
+ @tap=${(e: Event) => {
591
+ this._onTabScrollNavLeft(e, 'series')
592
+ }}
593
+ disabled
594
+ >chevron_left</md-icon
595
+ >
596
+ <div
597
+ id="series-tabs"
598
+ @change=${(e: Event) => {
599
+ configurer.currentSeriesIndex = (e.target as any).activeTabIndex
600
+ }}
601
+ active-tab-index=${configurer.currentSeriesIndex}
602
+ fit-container
603
+ >
604
+ ${configurer.datasets.map(
605
+ (dataset: any, index: number) => html`
606
+ <div
607
+ data-series=${index + 1}
608
+ data-tab-index=${index}
609
+ tab
610
+ ?selected=${index == configurer.currentSeriesIndex}
611
+ @click=${(e: Event) => {
612
+ const target = e.target as HTMLDivElement
613
+ this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))
614
+ this.value = { ...this.configurer.value }
615
+ }}
616
+ >
617
+ ${index + 1}
618
+ ${!configurer.datasets ||
619
+ (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
620
+ ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
621
+ : html``}
622
+ </div>
623
+ `
624
+ )}
625
+ </div>
626
+ <md-icon
627
+ id="series-tab-nav-right-button"
628
+ @click=${(e: Event) => {
629
+ this._onTabScrollNavRight(e, 'series')
630
+ }}
631
+ disabled
632
+ >chevron_right</md-icon
633
+ >
634
+ </div>
635
+ <div id="add-series-button-container">
636
+ <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
609
637
  </div>
610
- <md-icon
611
- id="series-tab-nav-right-button"
612
- @click=${(e: Event) => {
613
- this._onTabScrollNavRight(e, 'series')
614
- }}
615
- disabled
616
- >chevron_right</md-icon
617
- >
618
- </div>
619
- <div id="add-series-button-container">
620
- <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
621
- </div>
622
638
 
623
- <div class="tab-content">
624
- <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
625
- <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
626
-
627
- ${this.chartType == 'line' || this.chartType == 'bar'
628
- ? html`
629
- <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
630
- <select
631
- id="series-type"
632
- class="select-content"
633
- value-key="series.type"
634
- .value=${configurer.series.type || ''}
635
- >
636
- <option value="bar" selected>Bar</option>
637
- <option value="line">Line</option>
638
- </select>
639
- `
640
- : html``}
641
-
642
- <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
643
- <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
644
-
645
- ${configurer.series.type == 'line'
646
- ? html`
647
- <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
648
- <select
649
- id="series-line-tension"
650
- class="select-content"
651
- value-key="series.lineTension"
652
- .value=${String(configurer.series.lineTension || 0)}
653
- >
654
- <option value="0.4">Smooth</option>
655
- <option value="0">Angled</option>
656
- </select>
657
- `
658
- : html``}
659
- ${configurer.series.type == 'line'
660
- ? html`
661
- <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
662
- <input
663
- id="series-border-width"
664
- type="number"
665
- value-key="series.borderWidth"
666
- .value=${String(configurer.series.borderWidth || 0)}
667
- />
668
- `
669
- : html``}
670
-
671
- <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
672
- <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
673
-
674
- ${configurer.series.type == 'line'
675
- ? html`
676
- <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
677
- <select
678
- id="series-point-style"
679
- class="select-content"
680
- value-key="series.pointStyle"
681
- .value=${configurer.series.pointStyle || ''}
682
- >
683
- <option value="">&nbsp;</option>
684
- <option value="circle">⚬</option>
685
- <option value="triangle">▵</option>
686
- <option value="rect">□</option>
687
- <option value="rectRot">◇</option>
688
- <option value="cross">+</option>
689
- <option value="crossRot">⨉</option>
690
- <option value="star">✱</option>
691
- <option value="line">―</option>
692
- <option value="dash">┄</option>
693
- </select>
694
-
695
- <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
696
- <input
697
- id="series-point-radius"
698
- type="number"
699
- value-key="series.pointRadius"
700
- .value=${String(configurer.series.pointRadius || 0)}
701
- />
702
- `
703
- : html``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
704
- <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
705
- ${configurer.series.type == 'line'
706
- ? html`
707
- <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
708
- <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
709
- `
710
- : html``}
711
- ${configurer.multiAxis
712
- ? html`
713
- <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
714
- <select
715
- id="series-y-axis-id"
716
- class="select-content"
717
- value-key="series.yAxisID"
718
- .value=${configurer.series.yAxisID || ''}
719
- >
720
- <option value="left">Left</option>
721
- <option value="right">Right</option>
722
- </select>
723
- `
724
- : html``}
725
- ${this.displayValueTemplate()}
639
+ <div class="tab-content">
640
+ <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
641
+ <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
642
+
643
+ ${this.chartType == 'line' || this.chartType == 'bar'
644
+ ? html`
645
+ <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
646
+ <select
647
+ id="series-type"
648
+ class="select-content"
649
+ value-key="series.type"
650
+ .value=${configurer.series.type || ''}
651
+ >
652
+ <option value="bar" selected>Bar</option>
653
+ <option value="line">Line</option>
654
+ </select>
655
+ `
656
+ : html``}
657
+
658
+ <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
659
+ <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
660
+
661
+ ${configurer.series.type == 'line'
662
+ ? html`
663
+ <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
664
+ <select
665
+ id="series-line-tension"
666
+ class="select-content"
667
+ value-key="series.lineTension"
668
+ .value=${String(configurer.series.lineTension || 0)}
669
+ >
670
+ <option value="0.4">Smooth</option>
671
+ <option value="0">Angled</option>
672
+ </select>
673
+ `
674
+ : html``}
675
+ ${configurer.series.type == 'line'
676
+ ? html`
677
+ <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
678
+ <input
679
+ id="series-border-width"
680
+ type="number"
681
+ value-key="series.borderWidth"
682
+ .value=${String(configurer.series.borderWidth || 0)}
683
+ />
684
+ `
685
+ : html``}
686
+
687
+ <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
688
+ <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
689
+
690
+ ${configurer.series.type == 'line'
691
+ ? html`
692
+ <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
693
+ <select
694
+ id="series-point-style"
695
+ class="select-content"
696
+ value-key="series.pointStyle"
697
+ .value=${configurer.series.pointStyle || ''}
698
+ >
699
+ <option value="">&nbsp;</option>
700
+ <option value="circle">⚬</option>
701
+ <option value="triangle">▵</option>
702
+ <option value="rect">□</option>
703
+ <option value="rectRot">◇</option>
704
+ <option value="cross">+</option>
705
+ <option value="crossRot">⨉</option>
706
+ <option value="star">✱</option>
707
+ <option value="line">―</option>
708
+ <option value="dash">┄</option>
709
+ </select>
710
+
711
+ <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
712
+ <input
713
+ id="series-point-radius"
714
+ type="number"
715
+ value-key="series.pointRadius"
716
+ .value=${String(configurer.series.pointRadius || 0)}
717
+ />
718
+ `
719
+ : html``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
720
+ <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
721
+ ${configurer.series.type == 'line'
722
+ ? html`
723
+ <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
724
+ <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
725
+ `
726
+ : html``}
727
+ ${configurer.multiAxis
728
+ ? html`
729
+ <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
730
+ <select
731
+ id="series-y-axis-id"
732
+ class="select-content"
733
+ value-key="series.yAxisID"
734
+ .value=${configurer.series.yAxisID || ''}
735
+ >
736
+ <option value="left">Left</option>
737
+ <option value="right">Right</option>
738
+ </select>
739
+ `
740
+ : html``}
741
+ ${this.displayValueTemplate()}
742
+ </div>
726
743
  </div>
727
- </div>
728
- `
744
+ `
745
+ )
729
746
  }
730
747
 
731
748
  _onTabScroll(e: Event, type: 'series' | 'annotations') {