Complete re-write for the mythic+ chart shown in the end of the run

2024-08-06 19:26:23 -03:00
parent 70a9a067df
commit c8dc780082
5 changed files with 742 additions and 434 deletions
@@ -33,7 +33,16 @@ local _
 ---| "number" same as timer, but the number is not comverted to time
 ---| "value" a fixed table with values is passed by the SetXAxisData() function

+---@class df_chartline : line
+---@field thickness number
+
 ---@class df_chartshared: table
+---@field fillOrder table<number, number[]> the order of the lines to be filled, this table is shared by all charts
+---@field bFillChart boolean if the chart lines should be filled or not
+---@field fillChartLineThickness number the thickness of the fill line
+---@field bRunningInBackground boolean true if there is a proccess happening asynchronously
+---@field waitForBackgroundProcessTicker timer a ticker to check if all background process finished
+---@field amountOfBackgroundProcess number the amount of background processes happening
 ---@field yAxisLine line the vertical line which can be anchored in the left or right side of the frame, if the chart is a multi chart, this line is shared by all charts
 ---@field xAxisLine line the horizontal line which can be anchored in the top or bottom side of the frame, if the chart is a multi chart, this line is shared by all charts
 ---@field xAxisDataNumber any if the data type of the x axis is "number" or "time"
@@ -49,12 +58,17 @@ local _
 ---@field smoothnessLevel number default: 0, the smoothness level of the chart lines, 0 is no smoothness
 ---@field backdropIndicators chart_backdropindicator[]
 ---@field nextBackdropIndicator number tell which is the next backdrop indicator to be used
+---@field SetFillChart fun(self: df_chartshared, bFill: boolean, lineThickness:number?) set if the chart lines should be filled or not
+---@field GetFillState fun(self: df_chartshared) : boolean, number return if the chart lines should be filled or not
+---@field ShrinkData fun(self: df_chartmulti|df_chart, data: table, skrinkBy: number, bJustDrop: boolean?) : table
+---@field HasBackgroundProcess fun(self: df_chartmulti|df_chart) : boolean return true if there is a proccess happening asynchronously
+---@field SetBackgroundProcessState fun(self: df_chartmulti|df_chart, bRunning: boolean) set if there is a proccess happening asynchronously
 ---@field CreateBackdropIndicator fun(self: df_chartmulti|df_chart, index: number) : chart_backdropindicator create a new backdrop indicator
 ---@field GetBackdropIndicator fun(self: df_chartmulti|df_chart) : chart_backdropindicator get a backdrop indicator by index
 ---@field ResetBackdropIndicators fun(self: df_chartmulti|df_chart) reset all backdrop indicators
 ---@field SetAxesColor fun(self: df_chartmulti, red: number|string|table|nil, green: number|nil, blue: number|nil, alpha: number|nil) : boolean set the color of both axis lines
 ---@field SetAxesThickness fun(self: df_chartmulti, thickness: number) : boolean set the thickness of both axis lines
---@field CreateAxesLines fun(self: df_chartmulti|df_chart, xOffset: number, yOffset: number, whichSide: "left"|"right", thickness: number, amountYLabels: number, amountXLabels: number, red: any, green: number|nil, blue: number|nil, alpha: number|nil)
+---@field CreateAxesLines fun(self: df_chartmulti|df_chart, xOffset: number, yOffset: number, whichSide: "left"|"right", thickness: number, amountYLabels: number, amountXLabels: number, red: any, green: number|nil, blue: number|nil, alpha: number|nil) create the x and y axis lines with their labels, offsets are the distance from left and bottom
 ---@field SetXAxisDataType fun(self: df_chartmulti|df_chart, dataType: x_axisdatatype) : boolean set the data type of the x axis, if time, the x axis will be a time axis, if value, the x axis will be a value axis
 ---@field SetXAxisData fun(self: df_chartmulti|df_chart, data: any) set the data of the x axis, if time, the x axis will be a time axis, if value, the x axis will be a value axis
 ---@field SharedContrustor fun(self: df_chartmulti|df_chart) set default values for fields used on both chart types
@@ -78,13 +92,15 @@ end

 ---@class df_chart: frame, df_data, df_value, df_chartshared
 ---@field _dataInfo df_data
+---@field average number
+---@field depth number
 ---@field color number[] red green blue alpha
 ---@field height number
 ---@field nextLine number
 ---@field minValue number
 ---@field maxValue number
 ---@field data number[]
---@field lines line[]
+---@field lines df_chartline[]
 ---@field fixedLineWidth number
 ---@field chartName string
 ---@field dataPoint_OnEnterFunc fun(self: df_chart, onEnterFunc: function, ...) set the function to be called when the mouse hover over a data point in the chart
@@ -93,8 +109,8 @@ end
 ---@field dataPoint_OnLeavePayload any[] set the payload to be passed to the function set by DataPoint_OnLeaveFunc
 ---@field GetOnEnterLeaveFunctions fun(self: df_chart) : function, any[], function, any[] return the functions and payloads set by DataPoint_OnEnterFunc and DataPoint_OnLeaveFunc
 ---@field ChartFrameConstructor fun(self: df_chart) set the default values for the chart frame
---@field GetLine fun(self: df_chart) : line return a line and also internally handle next line
---@field GetLines fun(self: df_chart) : line[] return a table with all lines already created
+---@field GetLine fun(self: df_chart) : df_chartline return a line and also internally handle next line
+---@field GetLines fun(self: df_chart) : df_chartline[] return a table with all lines already created
 ---@field GetLineWidth fun(self: df_chart) : number calculate the width of each drawn line
 ---@field SetLineWidth fun(self: df_chart, width: number) set the line width to a fixed value
 ---@field GetAmountLines fun(self: df_chart) : number return the amount of lines in use
@@ -106,7 +122,7 @@ end
 ---@field SetLineThickness fun(self: df_chart, thickness: number) set the line thickness
 ---@field CalcYAxisPointForValue fun(self: df_chart, value: number, plotFrameHeightScaled: number) : number
 ---@field UpdateFrameSizeCache fun(self: df_chart)
---@field Plot fun(self: df_chart, yPointScale: number|nil, bUpdateLabels: boolean|nil)  draw the graphic using lines and following the data set by SetData() or AddData() in multi chart
+---@field Plot fun(self: df_chart, yPointScale: number|nil, bUpdateLabels: boolean|nil, lineId:number?)  draw the graphic using lines and following the data set by SetData() or AddData() in multi chart

 ---@class df_chartmulti : df_chart, df_chartshared
 ---@field chartFrames df_chart[]
@@ -117,7 +133,7 @@ end
 ---@field MultiChartFrameConstructor fun(self: df_chartmulti)
 ---@field GetCharts fun(self: df_chartmulti) : df_chart[]
 ---@field GetChart fun(self: df_chartmulti) : df_chart
---@field AddData fun(self: df_chartmulti, data: table, name: string, red: any, green: number|nil, blue: number|nil, alpha: number|nil)
+---@field AddData fun(self: df_chartmulti, data: table, smoothingMethod: string|nil, smoothnessLevel:number, name: string, red: any, green: number|nil, blue: number|nil, alpha: number|nil)
 ---@field GetAmountCharts fun(self: df_chartmulti): number
 ---@field HideCharts fun(self: df_chartmulti)
 ---@field Reset fun(self: df_chartmulti)
@@ -190,7 +206,6 @@ local createHorizontalAxisLabels = function(parent, amountLabels, labelsTable, r
    end
 end

---create the x and y axis lines with their labels
 ---@param self df_chart|df_chartmulti
 ---@param xOffset number
 ---@param yOffset number
@@ -342,8 +357,84 @@ local updateLabelValues = function(self)
 end

 detailsFramework.ChartFrameSharedMixin = {
-    ---set the color of both axis lines
+    ---set if the chart lines should be filled or not, when filled, an extra line is drawn at the bottom of the chart to close the fill
+    ---@param self df_chartshared
+    ---@param bFill boolean
+    ---@param lineThickness number?
+    SetFillChart = function(self, bFill, lineThickness)
+        lineThickness = lineThickness or 1
+        self.bFillChart = bFill
+        self.fillChartLineThickness = lineThickness
+    end,
+
+    ---return if the chart lines should be filled or not
+    ---@param self df_chartshared
+    ---@return boolean
+    ---@return number
+    GetFillState = function(self)
+        return self.bFillChart, self.fillChartLineThickness
+    end,
+
+    ---receives a table containing the data to be plotted in the chart, returns a new table with the data reduced by the skrinkBy value
+    ---if bJustDrop is true, the data will be reduced by dropping values, if false, the data will be reduced by averaging the values
    ---@param self df_chart|df_chartmulti
+    ---@param data table
+    ---@param skrinkBy number
+    ---@param bJustDrop boolean
+    ---@return table
+    ShrinkData = function(self, data, skrinkBy, bJustDrop)
+        local newData = {}
+        local dataSize = #data
+
+        local tinsert = table.insert
+
+        if (bJustDrop) then
+            if (true) then
+                --make a for loop to drop the values by random, for example, is shrink is 3 and index is 9, it will drop at random two values of: 9 10 or 11
+            else
+                --it will shrink the data by dropping values each skrinkBy indexes
+                for i = 1, dataSize, skrinkBy do
+                    tinsert(newData, data[i])
+                end
+            end
+        else
+            --it will shrink the data by making an average of the values and add to newTable, shrinkBy controls how many values will be averaged
+            for i = 1, dataSize, skrinkBy do
+                local sum = 0
+                for o = 0, skrinkBy - 1 do
+                    sum = sum + (data[i + o] or 0) --attempt to perform arithmetic on field '?' (a nil value)
+                end
+                tinsert(newData, sum / skrinkBy)
+            end
+        end
+
+        return newData
+    end,
+
+    ---return if there is a proccess happening asynchronously
+    ---@param self df_chartmulti
+    ---@return boolean
+    HasBackgroundProcess = function(self)
+        return self.bRunningInBackground
+    end,
+
+    ---set if there is a proccess happening asynchronously
+    ---@param self df_chartmulti
+    ---@param bRunning boolean
+    SetBackgroundProcessState = function(self, bRunning)
+        if (bRunning) then
+            self.amountOfBackgroundProcess = self.amountOfBackgroundProcess + 1
+            self.bRunningInBackground = bRunning
+        else
+            self.amountOfBackgroundProcess = self.amountOfBackgroundProcess - 1
+            if (self.amountOfBackgroundProcess == 0) then
+                self.bRunningInBackground = false
+            end
+        end
+    end,
+
+    ---set the color of both axis lines
+    ---@param self df_chartmulti
    ---@param red any
    ---@param green number|nil
    ---@param blue number|nil
@@ -372,7 +463,7 @@ detailsFramework.ChartFrameSharedMixin = {
    end,

    ---set the thickness of both axis lines
-    ---@param self df_chart|df_chartmulti
+    ---@param self df_chartmulti
    ---@param thickness number
    ---@return boolean bThicknessChanged return true if the thickness was set, false if the axis lines are not created yet
    SetAxesThickness = function(self, thickness)
@@ -385,7 +476,7 @@ detailsFramework.ChartFrameSharedMixin = {
    end,

    ---create the x and y axis lines with their labels
-    ---@param self df_chart|df_chartmulti
+    ---@param self df_chartmulti
    ---@param xOffset number
    ---@param yOffset number
    ---@param whichSide "left"|"right"
@@ -401,20 +492,20 @@ detailsFramework.ChartFrameSharedMixin = {
        return createAxesLines(self, xOffset, yOffset, whichSide, thickness, amountYLabels, amountXLabels, red, green, blue, alpha)
    end,

-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ---@param ... any
    SetXAxisData = function(self, ...)
        setXAxisData(self, ...)
    end,

-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ---@param dataType x_axisdatatype
    SetXAxisDataType = function(self, dataType)
        setXAxisDataType(self, dataType)
    end,

    ---create a new backdrop indicator, this is called from the function GetBackdropIndicator
-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ---@return chart_backdropindicator
    CreateBackdropIndicator = function(self, nextIndicatorIndex)
        ---@type chart_backdropindicator
@@ -444,7 +535,7 @@ detailsFramework.ChartFrameSharedMixin = {
    end,

    ---reset the backdrop indicators by hidding all of them
-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ResetBackdropIndicators = function(self)
        for i = 1, #self.backdropIndicators do
            local thisBackdropIndicator = self.backdropIndicators[i]
@@ -455,7 +546,7 @@ detailsFramework.ChartFrameSharedMixin = {
    end,

    ---get a backdrop indicator, if it doesn't exist, create a new one
-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ---@return chart_backdropindicator
    GetBackdropIndicator = function(self)
        local nextIndicator = self.nextBackdropIndicator
@@ -469,7 +560,7 @@ detailsFramework.ChartFrameSharedMixin = {
    end,

    ---add a backdrop indicator to the chart
-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ---@param label string this is a text to be displayed on the left side of the indicator and on the top right corner of the chart panel
    ---@param timeStart number the start time of the indicator
    ---@param timeEnd number the end time of the indicator
@@ -497,7 +588,7 @@ detailsFramework.ChartFrameSharedMixin = {
    ---when Plot() is called, this function will be called to show the backdrop indicators
    ---it gets the x_axisdatatype or if not existant defaults to "time", calculate the area in pixels using the plot area width and the plot area 'time'
    ---then set the texture color, label texts and show the small squere indicators in the top right of the plot area
-    ---@param self df_chartmulti|df_chart
+    ---@param self df_chartmulti
    ShowBackdropIndicators = function(self)
        --get the x axis data type
        local xDataType = self.xAxisDataType or "time"
@@ -546,6 +637,117 @@ detailsFramework.ChartFrameSharedMixin = {
    end,
 }

+local fillerLines_InAvailable = {}
+local fillerLines_InUse = {}
+
+---@class df_chartlazypayload : table
+---@field self df_chartmulti
+---@field currentDataIndex number
+---@field executionsPerFrame number
+---@field dataSize number
+---@field currentXPoint number
+---@field currentYPoint number
+---@field eachLineWidth number
+---@field plotFrameHeightScaled number
+---@field r number
+---@field g number
+---@field b number
+---@field lineId number
+---@field bUpdateLabels boolean
+---@field bFillChart boolean
+---@field fillLineThickness number
+
+--this is the function which is called by the schedules lazy execution system
+local lazyChartUpdate = function(payload, iterationCount, maxIterations)
+    ---@cast payload df_chartlazypayload
+
+    local self = payload.self
+    ---@cast self df_chart
+
+    local currentDataIndex = payload.currentDataIndex
+    local dataSize = payload.dataSize
+    local currentXPoint = payload.currentXPoint
+    local currentYPoint = payload.currentYPoint
+    local eachLineWidth = payload.eachLineWidth
+    local plotFrameHeightScaled = payload.plotFrameHeightScaled
+    local r = payload.r
+    local g = payload.g
+    local b = payload.b
+    local lineId = payload.lineId
+    local bUpdateLabels = payload.bUpdateLabels
+    local bFillChart = payload.bFillChart
+    local fillLineThickness = payload.fillLineThickness
+
+    local executionsPerFrame = payload.executionsPerFrame
+    currentDataIndex = currentDataIndex + executionsPerFrame
+
+    for i = 1, payload.executionsPerFrame do
+        local value, dataIndex = self:GetDataNextValue()
+        if (not value) then
+            --the data stream has ended
+            return true
+        end
+
+        local line = self:GetLine()
+        line:SetColorTexture(r, g, b)
+
+        if (line.thickness ~= self.lineThickness) then
+            line:SetThickness(self.lineThickness)
+            line.thickness = self.lineThickness
+        end
+
+        --get the start points
+        local startX = currentXPoint
+        local startY = currentYPoint
+        currentXPoint = currentXPoint + eachLineWidth
+        --end point
+        local endX = currentXPoint
+        currentYPoint = self:CalcYAxisPointForValue(value, plotFrameHeightScaled)
+        local endY = currentYPoint
+
+        local length = detailsFramework:GetVectorLength(endX - startX, endY - startY)
+        --make sure the magnitude of the difference between previous point to current point is at least 1.5
+        if (length < 1.5) then
+            local diffX = endX - startX
+            local diffY = endY - startY
+
+            local diffLength = detailsFramework:GetVectorLength(diffX, diffY)
+            local scaleFactor = 1.5 / diffLength
+
+            diffX = diffX * scaleFactor
+            diffY = diffY * scaleFactor
+
+            endX = endX + diffX
+            endY = endY + diffY
+        end
+
+        --the start point starts where the latest point finished
+        line:SetStartPoint("bottomleft", startX, startY)
+        line:SetEndPoint("bottomleft", endX, endY)
+
+        if (bFillChart) then
+            if (lineId) then
+                local fillLine = table.remove(fillerLines_InAvailable)
+                if (not fillLine) then
+                    fillLine = self.plotFrame:CreateLine(nil, "overlay")
+                    fillLine:SetThickness(fillLineThickness)
+                    fillerLines_InUse[#fillerLines_InUse+1] = fillLine
+                else
+                    fillerLines_InUse[#fillerLines_InUse+1] = fillLine
+                end
+
+                fillLine:SetStartPoint("bottomleft", endX, endY)
+                fillLine:SetEndPoint("bottomleft", endX, 0)
+                fillLine:SetDrawLayer("overlay", self.depth)
+                fillLine:SetColorTexture(r, g, b, 0.15 + (self.depth/10))
+            end
+        end
+    end
+
+    payload.currentXPoint = currentXPoint
+    payload.currentYPoint = currentYPoint
+end
+
 detailsFramework.ChartFrameMixin = {
    ---set the default values for the chart frame
    ---@param self df_chart
@@ -557,6 +759,8 @@ detailsFramework.ChartFrameMixin = {
        self.data = {}
        self.lines = {}
        self.color = {1, 1, 1, 1}
+        self.amountOfBackgroundProcess = 0
+
        --OnSizeChanged
        self:SetScript("OnSizeChanged", self.OnSizeChanged)

@@ -593,14 +797,17 @@ detailsFramework.ChartFrameMixin = {

    ---internally handle next line
    ---@param self df_chart
+    ---@return df_chartline
    GetLine = function(self)
-        ---@type line
+        ---@type df_chartline
        local line = self.lines[self.nextLine]

        if (not line) then
            ---@type line
-            line = self.plotFrame:CreateLine(nil, "overlay", nil, 5)
-            self.lines[self.nextLine] = line
+            local newLine = self.plotFrame:CreateLine(nil, "overlay", nil, 5)
+            ---@cast newLine df_chartline
+            self.lines[self.nextLine] = newLine
+            line = newLine
        end

        self.nextLine = self.nextLine + 1
@@ -610,7 +817,7 @@ detailsFramework.ChartFrameMixin = {

    ---return all lines created for this chart
    ---@param self df_chart
-    ---@return line[]
+    ---@return df_chartline[]
    GetLines = function(self)
        return self.lines
    end,
@@ -717,14 +924,12 @@ detailsFramework.ChartFrameMixin = {
    ---@param self df_chart
    ---@param yPointScale number|nil
    ---@param bUpdateLabels boolean|nil
-    Plot = function(self, yPointScale, bUpdateLabels)
-        --debug
-        --self:SetData({38, 26, 12, 63, 100, 96, 42, 94, 25, 75, 61, 54, 71, 40, 34, 100, 66, 90, 39, 13, 99, 18, 72, 18, 83, 45, 56, 24, 33, 85, 95, 71, 15, 66, 19, 58, 52, 9, 83, 99, 100, 4, 3, 56, 6, 80, 94, 7, 40, 55, 98, 92, 20, 9, 35, 89, 72, 7, 13, 81, 29, 78, 55, 70, 12, 33, 39, 3, 84, 31, 10, 53, 51, 69, 66, 58, 71, 60, 31, 71, 27, 76, 21, 75, 15, 89, 2, 81, 72, 78, 74, 80, 97, 10, 59, 0, 31, 5, 1, 82, 71, 89, 78, 94, 74, 20, 65, 72, 56, 40, 92, 91, 40, 79, 4, 56, 18, 88, 88, 20, 20, 10, 47, 26, 80, 26, 75, 21, 57, 10, 67, 66, 84, 83, 14, 47, 83, 9, 7, 73, 63, 32, 64, 20, 40, 3, 46, 54, 17, 37, 82, 66, 65, 22, 12, 1, 100, 41, 1, 72, 38, 41, 71, 69, 88, 34, 10, 50, 9, 25, 19, 27, 3, 13, 40, 75, 3, 11, 93, 58, 81, 80, 93, 25, 74, 68, 91, 87, 79, 48, 66, 53, 64, 18, 51, 19, 32, 4, 21, 43})
-
+    Plot = function(self, yPointScale, bUpdateLabels, lineId)
+        lineId = lineId or 1
        self:UpdateFrameSizeCache()

        --max amount of data is the max amount of point the chart will have
-        local maxLines = self:GetDataSize()
+        local dataSize = self:GetDataSize()

        --calculate where the first point height will be
        local firstValue = self:GetDataFirstValue()
@@ -739,29 +944,29 @@ detailsFramework.ChartFrameMixin = {

        self:ResetDataIndex()

-        print(maxLines)
+        local r, g, b = unpack(self.color)

-        for i = 1, maxLines do
-            local line = self:GetLine()
+        local bFillChart, fillLineThickness = self:GetFillState()

-            line:SetTexture(unpack(self.color))
+        local payload = {
+            executionsPerFrame = 50,
+            self = self,
+            currentDataIndex = 1,
+            dataSize = dataSize,
+            currentXPoint = currentXPoint,
+            currentYPoint = currentYPoint,
+            eachLineWidth = eachLineWidth,
+            plotFrameHeightScaled = plotFrameHeightScaled,
+            r = r,
+            g = g,
+            b = b,
+            lineId = lineId,
+            bUpdateLabels = bUpdateLabels,
+            bFillChart = bFillChart,
+            fillLineThickness = fillLineThickness,
+        }

-            if (line.thickness ~= self.lineThickness) then
-                line:SetThickness(self.lineThickness)
-                line.thickness = self.lineThickness
-            end
-
-            --the start point starts where the latest point finished
-            line:SetStartPoint("bottomleft", currentXPoint, currentYPoint)
-
-            --move x
-            currentXPoint = currentXPoint + eachLineWidth
-
-            --end point
-            local value = self:GetDataNextValue()
-            currentYPoint = self:CalcYAxisPointForValue(value, plotFrameHeightScaled)
-            line:SetEndPoint("bottomleft", currentXPoint, currentYPoint)
-        end
+        detailsFramework.Schedules.LazyExecute(lazyChartUpdate, payload)

        self:ShowBackdropIndicators()

@@ -771,6 +976,198 @@ detailsFramework.ChartFrameMixin = {
    end,
 }

+--https://en.wikipedia.org/wiki/Local_regression
+local calcLOESS = function(data, span, mainFrame, chartFrame)
+    local lazyLOESSUpdate = function(payload, iterationCount, maxIterations)
+        local data = payload.data
+        local span = payload.span
+        local lastDataIndex = payload.lastDataIndex
+        local result = payload.result
+        local halfSpan = payload.halfSpan
+        local sumTotal = payload.sumTotal
+
+        local currentDataIndex = payload.currentDataIndex
+        payload.currentDataIndex = currentDataIndex + payload.executionsPerFrame
+
+        local max = math.max
+        local min = math.min
+        local abs = math.abs
+        local tinsert = table.insert
+
+        for i = currentDataIndex, currentDataIndex + payload.executionsPerFrame do
+            --define the local neighborhood
+            local neighborhood = {}
+            for o = max(1, i - halfSpan), min(lastDataIndex, i + halfSpan) do
+                tinsert(neighborhood, {x = o, y = data[o]})
+            end
+
+            sumTotal = sumTotal + data[i]
+
+            --calculate weights based on distance from target point
+            local weights = {}
+            for _, point in ipairs(neighborhood) do
+                local distance = abs(i - point.x)
+                local weight = (1 - (distance / (halfSpan + 1)) ^ 3) ^ 3
+                weights[point.x] = weight
+            end
+
+            --fit a weighted linear regression to the neighborhood
+            local sum_w = 0
+            local sum_wx = 0
+            local sum_wy = 0
+            local sum_wxx = 0
+            local sum_wxy = 0
+
+            for _, point in ipairs(neighborhood) do
+                local w = weights[point.x]
+                sum_w = sum_w + w
+                sum_wx = sum_wx + w * point.x
+                sum_wy = sum_wy + w * point.y
+                sum_wxx = sum_wxx + w * point.x * point.x
+                sum_wxy = sum_wxy + w * point.x * point.y
+            end
+
+            local denominator = sum_w * sum_wxx - sum_wx * sum_wx
+            local intercept = (sum_wy * sum_wxx - sum_wx * sum_wxy) / denominator
+            local slope = (sum_w * sum_wxy - sum_wx * sum_wy) / denominator
+
+            --predict the smoothed value at the target point
+            result[i] = max(0, intercept + slope * i)
+
+            --check if can finishe the execution
+            if (i == lastDataIndex) then
+                return true
+            end
+        end
+
+        payload.sumTotal = sumTotal
+    end
+
+    local result = {}
+    local dataSize = #data
+    local halfSpan = math.floor(span / 2)
+
+    local payload = {
+        currentDataIndex = 1,
+        sumTotal = 0,
+        lastDataIndex = dataSize,
+        executionsPerFrame = 100,
+        data = data,
+        span = span,
+        result = result,
+        halfSpan = halfSpan,
+    }
+
+    ---@type df_schedule
+    local schedules = detailsFramework.Schedules
+
+    local onEndLazyExecution = function(payload)
+        chartFrame:SetDataRaw(payload.result)
+
+        chartFrame.average = payload.sumTotal / dataSize
+
+        local minValue, maxValue = chartFrame:GetDataMinMaxValues()
+        chartFrame:SetMinMaxValues(minValue, maxValue)
+        --clear the lines
+        chartFrame:HideLines()
+        mainFrame:SetBackgroundProcessState(false)
+    end
+
+    mainFrame:SetBackgroundProcessState(true)
+    schedules.LazyExecute(lazyLOESSUpdate, payload, 999, onEndLazyExecution)
+end
+
+--simple moving average
+---@param data table
+---@param averageSize number
+---@param mainFrame df_chartmulti
+---@param chartFrame df_chart
+---@param bAddZeroPadding boolean?
+local calcSMA = function(data, averageSize, mainFrame, chartFrame, bAddZeroPadding)
+    if (bAddZeroPadding) then
+        --fill the start of the data with zeros
+        for i = 1, averageSize - 1 do
+            --insert at index 1 a zero
+            table.insert(data, 1, 0)
+        end
+    end
+
+    local lazySMAUpdate = function(payload, iterationCount, maxIterations)
+        local averageSize = payload.averageSize
+        local result = payload.result
+        local data = payload.data
+        local lastDataIndex = payload.lastDataIndex
+        local sum = payload.sum
+        local sumTotal = payload.sumTotal
+        local bAddZeroPadding = payload.bAddZeroPadding
+
+        local currentDataIndex = payload.currentDataIndex
+        payload.currentDataIndex = currentDataIndex + payload.executionsPerFrame
+
+        local tinsert = table.insert
+
+        for i = currentDataIndex, currentDataIndex + payload.executionsPerFrame do
+            sum = sum + data[i]
+            sumTotal = sumTotal + data[i]
+            if (i >= averageSize) then
+                if (i > averageSize) then
+                    sum = sum - data[i - averageSize]
+                end
+                tinsert(result, max(0, sum / averageSize))
+            end
+
+            --check if can finishe the execution
+            if (i == lastDataIndex) then
+                if (bAddZeroPadding) then
+                    --remove from the data the zeros added at the start
+                    for o = 1, averageSize - 1 do
+                        --remove from the data the zero added at the first index
+                        table.remove(data, 1)
+                    end
+                end
+                return true
+            end
+        end
+
+        payload.sumTotal = sumTotal
+        payload.sum = sum
+    end
+
+    --return result
+    local result = {}
+    local dataSize = #data
+
+    local payload = {
+        sum = 0,
+        sumTotal = 0,
+        currentDataIndex = 1,
+        lastDataIndex = dataSize,
+        executionsPerFrame = 300,
+        data = data,
+        result = result,
+        averageSize = averageSize,
+        bAddZeroPadding = bAddZeroPadding,
+    }
+
+    ---@type df_schedule
+    local schedules = detailsFramework.Schedules
+
+    local onEndLazyExecution = function(payload)
+        chartFrame:SetDataRaw(payload.result)
+
+        chartFrame.average = payload.sumTotal / dataSize
+
+        local minValue, maxValue = chartFrame:GetDataMinMaxValues()
+        chartFrame:SetMinMaxValues(minValue, maxValue)
+        --clear the lines
+        chartFrame:HideLines()
+        mainFrame:SetBackgroundProcessState(false)
+    end
+
+    mainFrame:SetBackgroundProcessState(true)
+    schedules.LazyExecute(lazySMAUpdate, payload, 999, onEndLazyExecution)
+end
+
 ---create a chart frame object
 ---@param parent frame
 ---@param name string|nil
@@ -788,41 +1185,31 @@ local createChartFrame = function(parent, name)
    chartFrame:ValueConstructor()
    chartFrame:ChartFrameConstructor()

-    --when a new data is set, update the min and max values
-    local onSetDataCallback = function(data, smoothnessLevel)
-        local newData = {}
+    --when a new data is set, starting an background process to smooth the data
+    local onSetDataCallback = function(data, payload)
+        local smoothnessMethod = payload.smoothnessMethod or ""
+        local smoothnessLevel = payload.smoothnessLevel
+        local mainFrame = payload.mainFrame

        smoothnessLevel = smoothnessLevel or 0
+        smoothnessMethod = string.lower(smoothnessMethod)

-        if (smoothnessLevel > 0) then
-            smoothnessLevel = smoothnessLevel + 2
+        if (smoothnessMethod == "loess") then
+            calcLOESS(data, smoothnessLevel, mainFrame, chartFrame)

-            for i = 1, #data do
-                local thisValue = 0
-                local amountDataAdded = 0
+        elseif (smoothnessMethod == "sma") then
+            calcSMA(data, smoothnessLevel, mainFrame, chartFrame)

-                --calculate the sum within the window
-                for o = i - math.floor(smoothnessLevel / 2), i + math.floor(smoothnessLevel / 2) do
-                    if o >= 1 and o <= #data then
-                        thisValue = thisValue + data[o]
-                        amountDataAdded = amountDataAdded + 1
-                    end
-                end
-
-                --calculate the average and store in the smoothedData value
-                local average = thisValue / amountDataAdded
-                table.insert(newData, average)
-            end
+        elseif (smoothnessMethod == "smaz") then
+            local bAddZeroPadding = true
+            calcSMA(data, smoothnessLevel, mainFrame, chartFrame, bAddZeroPadding)
        else
-            newData = data
+            chartFrame:SetDataRaw(data)
+            local minValue, maxValue = chartFrame:GetDataMinMaxValues()
+            chartFrame:SetMinMaxValues(minValue, maxValue)
+            --clear the lines
+            chartFrame:HideLines()
        end
-
-        chartFrame:SetDataRaw(newData)
-
-        local minValue, maxValue = chartFrame:GetDataMinMaxValues()
-        chartFrame:SetMinMaxValues(minValue, maxValue)
-        --clear the lines
-        chartFrame:HideLines()
    end
    chartFrame:AddDataChangeCallback(onSetDataCallback)

@@ -831,13 +1218,6 @@ local createChartFrame = function(parent, name)
 end


-
-function detailsFramework:CreateGraphicLineFrame(parent, name)
-    ---@type df_chart
-    local newGraphicFrame = createChartFrame(parent, name)
-    return newGraphicFrame
-end
-
 detailsFramework.MultiChartFrameMixin = {
    MultiChartFrameConstructor = function(self)
        self.nextChartselframe = 1
@@ -846,6 +1226,7 @@ detailsFramework.MultiChartFrameMixin = {
        self.nextChartFrame = 1
        self.chartFrames = {}
        self.lineNameIndicators = {}
+        self.amountOfBackgroundProcess = 0

        chartFrameSharedConstructor(self)
    end,
@@ -857,27 +1238,29 @@ detailsFramework.MultiChartFrameMixin = {
    ---add a new chart data and create a new chart frame if necessary to the multi chart
    ---@param self df_chartmulti
    ---@param data table
+    ---@param smoothingMethod string|nil
    ---@param smoothnessLevel number|nil
    ---@param name string|nil
    ---@param red any
    ---@param green number|nil
    ---@param blue number|nil
    ---@param alpha number|nil
-    AddData = function(self, data, smoothnessLevel, name, red, green, blue, alpha)
+    AddData = function(self, data, smoothingMethod, smoothnessLevel, name, red, green, blue, alpha)
        assert(type(data) == "table", "MultiChartFrame:AddData() usage: AddData(table)")
        local chartFrame = self:GetChart()

        red, green, blue, alpha = detailsFramework:ParseColors(red, green, blue, alpha)
        chartFrame:SetColor(red, green, blue, alpha)
-        chartFrame:SetData(data, smoothnessLevel)
-
        chartFrame.chartName = name or ""

-        self:SetMaxValueIfBigger(chartFrame:GetMaxValue())
-        self:SetMinValueIfLower(chartFrame:GetMinValue())
+        local payload = {
+            smoothnessMethod = smoothingMethod or "sma",
+            smoothnessLevel = smoothnessLevel or 3,
+            mainFrame = self,
+        }

-        local dataAmount = chartFrame:GetDataSize()
-        self:SetMaxDataSize(dataAmount)
+        --setting the data will start a background process to smooth the data
+        chartFrame:SetData(data, payload)
    end,

    ---internally handle next line
@@ -1023,14 +1406,58 @@ detailsFramework.MultiChartFrameMixin = {
        end
    end,

+    ---@param self df_chartmulti
+    WaitForBackgroundProcess = function(self)
+        --start a ticker to check if the background process is done
+        if (not self.waitForBackgroundProcessTicker) then
+            self.waitForBackgroundProcessTicker = C_Timer.NewTicker(0.1, function()
+                if (not self:HasBackgroundProcess()) then
+                    self.waitForBackgroundProcessTicker:Cancel()
+                    self.waitForBackgroundProcessTicker = nil
+                    self:Plot()
+                end
+            end)
+        end
+    end,
+
    ---draw all the charts added to the multi chart frame
    ---@param multiChartFrame df_chartmulti
    Plot = function(multiChartFrame)
+        --check if there is a background process ongoing
+        if (multiChartFrame:HasBackgroundProcess()) then
+            multiChartFrame:WaitForBackgroundProcess()
+            return
+        end
+
+        local allCharts = multiChartFrame:GetCharts()
+        local bFillChart, fillLineThickness = multiChartFrame:GetFillState()
+        ---@type table<number, {average: number, chartIndex: number}>
+        local biggestAverage = {}
+
+        --set the min/max values of the multi chart frame
+        for i = 1, multiChartFrame:GetAmountCharts() do
+            local chartFrame = allCharts[i]
+            multiChartFrame:SetMaxValueIfBigger(chartFrame:GetMaxValue())
+            multiChartFrame:SetMinValueIfLower(chartFrame:GetMinValue())
+
+            local dataAmount = chartFrame:GetDataSize()
+            multiChartFrame:SetMaxDataSize(dataAmount)
+
+            if (bFillChart) then
+                chartFrame:SetFillChart(true, fillLineThickness)
+            end
+
+            --get the average of this chart
+            biggestAverage[i] = {average = chartFrame.average, chartIndex = i}
+        end
+
+        --sort the averages by the biggest average placing the biggest average in the first position
+        table.sort(biggestAverage, function(a, b) return a.average > b.average end)
+
        local minValue, multiChartMaxValue = multiChartFrame:GetMinMaxValues()
        local plotAreaWidth = multiChartFrame.plotFrame:GetWidth() --if there's no axis, the plotFrame has no width
        local maxDataSize = multiChartFrame:GetMaxDataSize() --it's not clearing when a new boss is selected
        local eachLineWidth = plotAreaWidth / maxDataSize
-        local allCharts = multiChartFrame:GetCharts()

        for i = 1, multiChartFrame:GetAmountCharts() do
            local chartFrame = allCharts[i]
@@ -1043,11 +1470,19 @@ detailsFramework.MultiChartFrameMixin = {
            chartFrame:SetLineThickness(multiChartFrame.lineThickness)
            chartFrame:SetLineWidth(eachLineWidth)

+            for o = 1, #biggestAverage do
+                local thisAverageTable = biggestAverage[o]
+                if (thisAverageTable.chartIndex == i) then
+                    chartFrame.depth = o
+                    break
+                end
+            end
+
            --get the percentage of how small this data is compared to the biggest data
            --this percentage is then used to scale down the to fit correctly the fontStrings showing the value metrics
            local yPointScale = chartFrame.maxValue / multiChartMaxValue
            local bUpdateLabels = false
-            chartFrame:Plot(yPointScale, bUpdateLabels)
+            chartFrame:Plot(yPointScale, bUpdateLabels, i)
        end

        multiChartFrame:ShowBackdropIndicators()