Эта статья является продолжением первой статьи, где мы создавали визуал с нуля. Подход, который мы использовали, был очень простым, мы напрямую использовали интерфейсы данных, не используя типизацию. В этой статье мы добавим типизацию. Вместо чтения вы также можете посмотреть видео:
Коммит для вышеуказанного видео можно найти здесь и здесь.
Приведенный ниже текст представляет собой слегка структурированную/урезанную версию транскрипции аудио приведенного выше видео. В видео много шагов проверки console.log, а в тексте ниже показаны окончательные изменения кода.
Добавление явных интерфейсов и добавление ввода
Мы собираемся добавить пару дополнительных полей, чтобы у нас было не только имя KPI, но также описание и всплывающая подсказка.
Мы собираемся добавить эти поля в роли данных (в файле возможностей.json).
Также нам нужно изменить привязку (в возможностях.json):
Теперь мы можем получить позицию индекса каждого из этих отдельных полей, поэтому для этого нам понадобится помощник роли данных, который поможет нам определить позицию индекса определенного поля. Мы импортируем эту функцию.
import { dataRoleHelper } from "powerbi-visuals-utils-dataviewutils";
И мы добавим еще один массив с категориями:
categorical = options.dataViews[0].categorical;
Мы хотим найти позицию индекса определенного поля, и для этого мы можем использовать этот помощник роли данных. Мы добавим этот фрагмент кода, где мы указываем столбец, который мы ищем:
let kpiId = dataRoleHelper.getCategoryIndexOfRole(categorical.categories, "kpi")
Давайте посмотрим, что произойдет, если мы перетащим в то же поле, теперь у нас есть описание и во всплывающей подсказке, и в поле описания. Мы видим, что всплывающая подсказка также относится к позиции индекса 1, хотя мы могли бы ожидать, что это будет номер 2.
Мы можем проверить, потому что, по сути, он просматривает роли, поэтому всякий раз, когда это правда, он возвращает эту позицию, а описание на самом деле похоже на второе поле данных, которое мы получаем, поэтому это все еще точно то, что мы получаем. Более подробная информация доступна здесь.
Теперь, когда у нас есть эти явные интерфейсы, мы собираемся применить некоторую типизацию. Мы собираемся определить интерфейс точки данных, где мы специально собираемся указать каждый столбец в этом массиве, это будет пара ключ-значение.
Теперь мы можем добавить «Цикл For», в котором мы будем перебирать имена KPI, а затем заполнять массив, который был введен, и мы будем вставлять значения, которые мы получаем, поэтому, прежде всего, выберите KPI. ценности;
let kpiVals = categorical.categories[kpiId]['values'];
Итак, мы определили значения KPI, и теперь мы можем перебирать их в цикле for;
Отсюда наша ссылка в D3 основана не на индексе столбца, а на самом деле на имени столбца, например. как здесь:
.style("fill", (d: kpiDataPoint) => d.colour)
На этом мы завершаем эту статью, в которой мы добавили интерфейсы типизированных данных. Следите за новыми статьями о визуальной разработке, веб-скрейпинге, автоматизации делопроизводства и т. д.