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