Пользовательская визуализация Power BI: создание линейной и точечной диаграммы

Question

Я создаю пользовательский визуал Power BI, который объединяет линейную и точечную диаграммы. Приведенное ниже объяснение чрезвычайно подробно, но конечный результат, к которому я стремлюсь, идентичен этому примеру, который я создал в Excel:

В частности, на диаграмме будет показан ряд уровней оплаты труда, причем точки показывают, где в пределах этих уровней оплаты выпадает данный сотрудник. Например, уровень оплаты 1 может варьироваться от 20 000 до 25000 долларов, а работник, зарабатывающий 22 500 долларов, будет размещен непосредственно в центре этого уровня оплаты. Сложность этого, однако, заключается в том, что вместо осей, имеющих суммы в долларах, они должны представлять ширину диапазона. В приведенном выше примере ширина диапазона составляет (25000–20 000)/20 000 или 0,25, поэтому мне нужно, чтобы линия включала точки в точках (-125, 1) и (0,125, 1) и точку сотрудника быть в точке (0,1), так как он находится в средней точке диапазона. (Чтобы получить 0 для значения y этого сотрудника, математика ((22500-20000)/20000) - (25000-20000)/20000/2)

Поэтому я бы хотел две строки (одну для минимальной зарплаты и одну для максимальной) вместе с точечной диаграммой.

В настоящее время я использую viewModel со статическими данными и добавлю привязку данных, как только я успешно построю диаграмму. Диаграмма рассеяния, кажется, работает, и полный код здесь.

Я сейчас пытаюсь добавить строку. Я перебираю все оценки и создаю массив, который включает в себя правильно масштабированный номер оценки и половину ширины оценки. Так что теперь мне нужно добавить две строки. Можно было бы иметь каждое значение в массиве оценок. Другой будет иметь каждое значение в массиве Grades, но значение gradeWidth будет умножено на -1.

    interface Grade {
        grade: number,
        gradeWidth: number
    };

    var Grades: Array<Grade>[];

    for(var i = viewModel.minGrade; i = viewModel.maxGrade; i++) {
        for(var j = 0; j <= viewModel.dataPoints.length; j++) {
            if(viewModel.dataPoints[j].grade == i) {
                var temp = [{grade: yScale(i), gradeWidth: xScale((viewModel.dataPoints[j].rangemax - viewModel.dataPoints[j].rangemin)/viewModel.dataPoints[j].rangemin/2)}]
                Grades.push(temp);
            }
        }
    }

Итак, мой вопрос, как я могу взять этот массив оценок и сделать мой минимум (x,y) = (-gradeWidth, grade) и максимум (x,y) = gradeWidth, grade) линии?