vue: 簡単なガントチャートの実装

ChartBar.vue

<template>
  <div class="chart-bar" :style="gridColumn">
    <div class="chart-bar-bar" :style="{ background: color }" />
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Prop, Component, Vue } from "vue-property-decorator";

@Component
export default class ChartBar extends Vue {
  @Prop({ default: 1 }) start!: number;
  @Prop({ default: 1 }) span!: number;
  @Prop({ default: "gray" }) color!: string;

  get gridColumn() {
    return {
      gridColumn: `${this.start} / span ${this.span}`
    };
  }
}
</script>

<style lang="scss" scoped>
.chart-bar {
  position: relative;
}

.chart-bar-bar {
  height: 1.5rem;
}
</style>

ChartRow.vue

<template>
  <div class="chart-row" :style="grid">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Prop, Component, Vue } from "vue-property-decorator";

@Component
export default class ChartRow extends Vue {
  @Prop({ default: 1 }) length!: number;

  get grid() {
    return {
      display: "grid",
      gridTemplateColumns: `repeat(${this.length}, 1fr)`
    };
  }
}
</script>

ChartTemplate.vue

<template>
  <div class="chart">
    <!-- Body -->
    <ChartRow :length="length">
      <ChartBar start="5" span="3">
        <div class="chart-bar-label">
          label Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint
          dolorem fuga eaque quasi exercitationem dolor doloremque consectetur
          maxime atque, accusantium nam voluptatum modi sequi alias reiciendis
          provident, autem ut in?
        </div>
      </ChartBar>
    </ChartRow>
    <ChartRow :length="length">
      <ChartBar start="1" span="4" color="red">
        <div class="chart-bar-label">
          label
        </div>
      </ChartBar>
      <ChartBar start="2" span="4">
        <div class="chart-bar-label">
          label
        </div>
      </ChartBar>
    </ChartRow>
    <ChartRow :length="length">
      <ChartBar start="7" span="6">
        <div class="chart-bar-label">
          label
        </div>
      </ChartBar>
    </ChartRow>
    <!-- Mask -->
    <ChartRow :length="length" class="mask">
      <div class="chart-col" v-for="i in length" :key="i" />
    </ChartRow>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import ChartRow from "./ChartRow.vue";
import ChartBar from "./ChartBar.vue";

@Component({
  components: {
    ChartRow,
    ChartBar
  }
})
export default class ChartTemplate extends Vue {
  length = 14;
}
</script>

<style scoped lang="scss">
$border-style: 1px solid rgba(0, 0, 0, 0.3);

.chart {
  position: relative;
  border-left: $border-style;
}

.chart-col {
  border-right: $border-style;

  &:nth-child(7n),
  &:nth-child(7n + 1) {
    background: rgba(0, 0, 0, 0.1);
  }
}

.chart-bar-label {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>