QDisplay-Table Toggles | Repurposing for ML Potentially

index.html

<div id="q-app">
  <div class="q-pa-md">
    <q-table
      title="Quick Look:"
      :data="data"
      :columns="columns"
      row-key="name"
      :visible-columns="visibleColumns"
    >
      <template v-slot:top="props">
        <div class="col-2 q-table__title">ShellShip DXP </div>

        <q-space></q-space>

        <div v-if="$q.screen.gt.xs" class="col">
          <q-toggle v-model="visibleColumns" val="summary" label="Summary"></q-toggle>
          <q-toggle v-model="visibleColumns" val="slated_release_date" label="Slated Release"></q-toggle>
          <q-toggle v-model="visibleColumns" val="priority" label="Priority"></q-toggle>
          <q-toggle v-model="visibleColumns" val="status" label="Status"></q-toggle>
          <q-toggle v-model="visibleColumns" val="following" label="Following"></q-toggle>
          <q-toggle v-model="visibleColumns" val="description" label="Description"></q-toggle>
          <q-toggle v-model="visibleColumns" val="forecast" label="Forecast"></q-toggle>
        </div>
        <q-select
          v-else
          v-model="visibleColumns"
          multiple
          borderless
          dense
          options-dense
          :display-value="$q.lang.table.columns"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          style="min-width: 150px"
        ></q-select>

        <q-btn
          flat round dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          class="q-ml-md"
        ></q-btn>
      </template>

    </q-table>
  </div>
</div>

qdisplay-table-toggles-repurposing-for-ml-potentially.markdown

QDisplay-Table Toggles | Repurposing for ShellShip DXP

This is simply a feature table, filled with features from a RethinkDB apparatus which I've not yet hooked up. I find this is a great way to dial into data, and features need close magnification, so we can continue to expand on the epics in this way and since it's in JSON we can just export it wherever. i.e.- I'm probably just going to auto-import to Clickup and push automation from there or use Postgres graphile workers, or perhaps even Hasura actions using REST in 2.0 beta!

The thing about Hasura, is I can always run it on Timescale making it daringly near as fast as Rethink.

LICENSE: MIT Lynsei Asynynivynya for L7 Informatics R&D

script.babel

new Vue({
  el: '#q-app',
  data () {
    return {
      visibleColumns: [ 'summary', 'slated_release_date', 'priority', 'status', 'following', 'description', 'forecast' ],
      columns: [
        {
          name: 'desc',
          required: true,
          label: 'Feature Title',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'summary', align: 'center', label: 'Summary', field: 'summary', sortable: true },
        { name: 'description', label: 'Description', field: 'description', sortable: true } ,
        { name: 'slated_release_date', label: 'Slated to be released on:', field: 'date', sortable: true },
        { name: 'priority', label: 'Priority', field: 'priority'  },
        { name: 'status', label: 'Status', field: 'status', sortable: true },
        { name: 'following', label: 'Following', field: 'following' },
        { name: 'forecast', label: 'Forecast (%)', field: 'forecast', sortable: true }
      ],
      data: []
    }
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" />