webwriter-chart/types/helper-components/ChartOptions.js

ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, html } from "lit";
import { customElement } from "lit/decorators.js";
import "./LimitedNumberInput";
import "./Select";
//import { attribute } from "../functions";
//import { availableCharts } from "./Charts/imports";
import { SharedTestStateMixin } from "../state";
import { availableRegressions } from "./Charts/imports";
import { LitElementWw } from "@webwriter/lit";
import { NumberInput } from "./LimitedNumberInput";
import { Select } from "./Select";
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
import { Switch } from "./Switch";
//TODO: fix options in scatterplot not saved when switching between (Scatterplot and other charts)
let ChartOptions = class ChartOptions extends SharedTestStateMixin(LitElementWw) {
    render() {
        const { optionDefinition } = this.sharedState.chart;
        const optionInputs = Object.keys(optionDefinition).map((key) => {
            const { max, min, type } = optionDefinition[key];
            const value = this.sharedState.chart.options[key];
            const isDisabled = !(this.sharedState.editable ||
                (this.sharedState.teacherOptions.changeOptions &&
                    !this.sharedState.chart.optionsLocked[key]));
            const option = {
                key,
                name: optionDefinition[key].name,
                locked: this.sharedState.chart.optionsLocked[key],
                template: html ``,
            };
            switch (type) {
                case "number":
                    option.template = html `
              <wwci-limited-number-input
                ?disabled=${isDisabled}
                max=${max}
                min=${min}
                value=${value}
                @sl-input=${(e) => (this.sharedState.chart.options[key] = e.target.value)}
              ></wwci-limited-number-input>
            `;
                    break;
                case "boolean":
                    option.template = html `<wwci-switch
              ?disabled=${isDisabled}
              ?checked=${value}
              @wwci-change=${(e) => (this.sharedState.chart.options[key] = e.detail.value)}
            ></wwci-switch>`;
                    break;
                case "array":
                    option.template = html `<wwci-select
              .value="${this.sharedState.regressionType}"
              ?disabled=${isDisabled}
              .selectOptions="${availableRegressions}"
              @wwci-change="${(e) => {
                        this.sharedState.regressionType = e.target.value;
                    }}"
            >
            </wwci-select>`;
                    break;
                default:
                    option.template = html `<p>Unknown type: ${type}</p>`;
            }
            return option;
        });
        const optionInputsToShow = optionInputs.filter((input) => this.sharedState.editable ||
            this.sharedState.teacherOptions.showLockedOptions ||
            !input.locked);
        return html `
      ${optionInputsToShow.map((input) => {
            return html `
          <p class="text">${input.name}</p>
          ${input.template}
          ${this.sharedState.editable
                ? html `<sl-icon-button
                class="lock-button ${input.locked
                    ? "lock-button-locked"
                    : "lock-button-unlocked"}"
                name=${input.locked ? "lock" : "unlock"}
                label="Lock this option"
                @click=${() => {
                    this.sharedState.chart.optionsLocked[input.key] =
                        !this.sharedState.chart.optionsLocked[input.key];
                    console.log({
                        optionsLocked: this.sharedState.chart.optionsLocked,
                    });
                }}
              ></sl-icon-button>`
                : html `<div></div>`}
          <div></div>
        `;
        })}
      <div></div>
    `;
    }
    static get scopedElements() {
        return {
            "wwci-limited-number-input": NumberInput,
            "wwci-select": Select,
            "sl-input": SlInput,
            "wwci-switch": Switch,
        };
    }
};
ChartOptions.styles = css `
    .lock-button-locked {
      color: red;
    }

    .lock-button-unlocked {
      color: green;
    }

    .lock-button-locked::part(base):hover {
      color: red;
    }

    .lock-button-unlocked::part(base):hover {
      color: green;
    }
    .text {
      margin: 0;
      align-self: center;
      box-sizing: border-box;
      color: #1a1a1a;
    }
  `;
ChartOptions = __decorate([
    customElement("wwci-chart-options")
], ChartOptions);
export { ChartOptions };