dagronf / DSFSparkline

A lightweight sparkline component for macOS, iOS and tvOS
MIT License
137 stars 11 forks source link

SparkLine with list of same values and zero line overlay not displayed. #16

Open martindufort opened 7 months ago

martindufort commented 7 months ago

In some cases, my sparkline will have a series of identical values. Example:

var activityArray = [CGFloat](repeating: 20.0, count: 30)

I want to show them in a DSFSparklineZeroLineGraphView but for those cases, nothing is displayed. I even set the zeroLineVisible attribute to true.

Anything specific I'm missing? All my values will be positive values but I cannot control if they are all identical or not. Let me know where to investigate.

Thanks.

martindufort commented 7 months ago

I setup the y-range to always start at 0 and now all my values are properly displayed.

Also I noticed a little clipping when the value goes from zero to 1 and back down to zero. Here's the screenshot. Not a showstopper for me...

CleanShot 2024-01-11 at 19 10 33@2x

dagronf commented 7 months ago

Hi @martindufort ,

I want to show them in a DSFSparklineZeroLineGraphView but for those cases, nothing is displayed. I even set the zeroLineVisible attribute to true.

The DSFSparklineZeroLineGraphView should not be used directly to display a graph, you indirectly use it via one of the standard overloaded graphs (as a number of different graph types support drawing a zero line). So if you're wanting to draw a line graph, use the DSFSparklineLineGraphView instead (which inherits from DSFSparklineZeroLineGraphView).

You should really be using DSFSparklineLineGraphView instead.

dagronf commented 7 months ago

@martindufort for example, here is an example I just wrote

class ViewController: NSViewController {

   @IBOutlet weak var graph: DSFSparklineLineGraphView!

   override func viewDidLoad() {
      super.viewDidLoad()

      // Do any additional setup after loading the view.

      let activityArray = [CGFloat](repeating: 20.0, count: 30)

      let ds = DSFSparkline.DataSource(values: activityArray, range: 0 ... 30)
      ds.zeroLineValue = 10
      graph.dataSource = ds

      graph.layer!.borderColor = .init(gray: 0.5, alpha: 0.5)
      graph.layer!.borderWidth = 0.5
   }

   override var representedObject: Any? {
      didSet {
      // Update the view, if already loaded.
      }
   }
}
image
dagronf commented 7 months ago

@martindufort,

Also I noticed a little clipping when the value goes from zero to 1 and back down to zero. Here's the screenshot. Not a showstopper for me...

I just quickly adapted the example above with a 0 ... 1 range and values from zero to 1 and back down to zero. I'm not seeing the clipping you're talking about - is it possible to send me a minimal example project that displays the issue you're showing?

class ViewController: NSViewController {

   @IBOutlet weak var graph: DSFSparklineLineGraphView!

   override func viewDidLoad() {
      super.viewDidLoad()

      // Do any additional setup after loading the view.

      let activityArray: [CGFloat] = [ 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0.5, 1, 1, 0 ]

      let ds = DSFSparkline.DataSource(values: activityArray, range: 0 ... 1)
      ds.zeroLineValue = 0
      graph.dataSource = ds

      graph.interpolated = true

      graph.layer!.borderColor = .init(gray: 0.5, alpha: 0.5)
      graph.layer!.borderWidth = 0.5
   }

   override var representedObject: Any? {
      didSet {
      // Update the view, if already loaded.
      }
   }
}
image
martindufort commented 7 months ago

Thanks for the explanation. Will change my code to use DSFSparklineLineGraphView instead. As for the clipping, I will try to create a sample project.

However comparing your screenshot and mine, seems my zero-line has no space underneath while yours as some buffer. This is running on Ventura 13.6

martindufort commented 7 months ago

This is my init code. I"ve added a border around the graph like you did:

                self.activitySpark.wantsLayer = true
        self.activityDataSource = DSFSparkline.DataSource(windowSize: 30, range: 0.0...2.0)
        self.activityDataSource.zeroLineValue = 0.0
        self.activitySpark.dataSource = self.activityDataSource
        self.activitySpark.interpolated = true

        self.activitySpark.layer!.borderColor = .init(gray: 0.5, alpha: 0.5)
        self.activitySpark.layer!.borderWidth = 0.5

The border is flush with the graph with no space underneath the zero line.

CleanShot 2024-01-16 at 12 32 47@2x