An animated number widget for mustard

NumberWidget.vue

<template>
  <div class="center number">
    <h4>{{ title }}</h4>
    <AnimatedNumberComponent v-bind:value="model.value" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { getStoreItem, State } from "../store";
import AnimatedNumberComponent from "./shared/AnimatedNumber.vue";
@Component({
  components: {
    AnimatedNumberComponent
  }
})
export default class NumberComponent extends Vue {
  @Prop() private value?: number;
  @Prop() private title?: string;
  @Prop() private eventId?: string;
  get model(): { value: number } {
    return (
      getStoreItem((this.$store.state as unknown) as State, this.eventId) || {
        value: this.value || 0
      }
    );
  }
}
</script>

<style scoped lang="scss">
.number {
  background: #bc3908;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h1 {
    font-size: 60px;
  }
}
.red {
  background: #ef2d56;
}
.green {
  background: #0a8657;
}
</style>

Animated number widget for Mustard

Setting up

Install this widget by running $ mustard -gist=ad1b185cdd76abab4d0bd5eb4c8c4b22

Configuration

In App.Vue add this component and set the event Id to which this widget should be bound on server. Don't forget to provide an empty definition of the eventId in ./store/index.ts. This widget works best with binding this event to the Kafka consumer on server.

<NumberWidget eventId="eventId" />