Select a certain piece of data and click on split to see if it can be split into two parts about gantt-schedule-timeline-calendar

[1-hui]

Split a progress bar into two progress bars

[neuronetio]

To do this, you need to write your own progress bar plugin. Below is the code of the original progress bar for you to follow.

import type { Vido } from 'gantt-schedule-timeline-calendar';
import type DeepState from 'deep-state-observer';

export const pluginPath = 'config.plugin.ProgressBar';

export interface Options {
  enabled?: boolean;
  className?: string;
}

function getOptions(options: Options) {
  return {
    enabled: true,
    className: 'gstc__chart-timeline-items-row-item-progress-bar',
    ...options,
  };
}

class ProgressBar {
  private vido: Vido;
  private state: DeepState;
  private options: Options;
  private className: string;

  constructor(options: Options, vido: Vido) {
    this.options = getOptions(options);
    this.vido = vido;
    this.state = vido.state;
    this.className = this.options.className;
    this.PluginProgressBarSlot = this.PluginProgressBarSlot.bind(this);
    this.destroy = this.destroy.bind(this);
    this.state.update('config.slots.chart-timeline-items-row-item.inner', (slots) => {
      if (!slots.includes(this.PluginProgressBarSlot)) slots.push(this.PluginProgressBarSlot);
      return slots;
    });
  }

  public destroy() {
    this.state.update('config.slots.chart-timeline-items-row-item.inner', (slots) => {
      return slots.filter((slot) => slot !== this.PluginProgressBarSlot);
    });
    this.vido.api.pluginDestroyed('ProgressBar');
  }

  public PluginProgressBarSlot(vido: Vido, props: any) {
    let width;
    const styleMap = new vido.StyleMap({ width: '0px' });
    vido.onChange((newProps) => {
      props = newProps;
      if (!props || !props.item) {
        styleMap.style.width = '0px';
        return;
      }
      const itemData = vido.api.getItemData(props.item.id);
      if (!itemData || typeof props.item.progress === 'undefined') {
        styleMap.style.width = '0px';
        return;
      }
      if (!props.item) return;
      const item = props.item;
      const progress = typeof item.progress === 'undefined' ? 100 : item.progress;
      width = itemData.width - (itemData.width / 100) * progress;
      width -= itemData.position.right - itemData.position.actualRight;
      if (width < 0) width = 0;
      styleMap.style.width = width + 'px';
    });

    return (content) =>
      props && props.item && typeof props.item.progress !== 'undefined'
        ? this.vido.html`
        <div class="${this.className}" style=${styleMap.directive()}></div>${content}
      `
        : null;
  }
}

export function Plugin(options: Options = {}) {
  return function initialize(vidoInstance: Vido) {
    const currentOptions = vidoInstance.state.get(pluginPath);
    if (currentOptions) {
      options = vidoInstance.api.mergeDeep({}, options, currentOptions);
    }
    const progressBar = new ProgressBar(options, vidoInstance);
    vidoInstance.api.pluginInitialized('ProgressBar');
    return progressBar.destroy;
  };
}

If you need to add click event or something you need to modify the template:

<div class="${this.className}" style=${styleMap.directive()} @click=${yourClickHandler(props.item)}></div>${content}

You can read lit-html template documentation.