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