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