Code Monkey home page Code Monkey logo

Comments (10)

xqwzts avatar xqwzts commented on August 20, 2024

Hi Trent, thanks for opening this issue.

Optional grid lines and labels sound like reasonable features to add - I'll try to get them done when time permits.

Posting an issue like this is the best way to let me know what to prioritize :). PRs are welcome too of course!

from flutter_sparkline.

trentpiercy avatar trentpiercy commented on August 20, 2024

I just did it myself on my candlestick graphing package inspired by your sparkline package :) Figured out how to do all the painting by just staring at ur code. I could do a similar thing for this and submit a PR if you like how they look?

from flutter_sparkline.

xqwzts avatar xqwzts commented on August 20, 2024

Nice work! If having them in a sparkline chart would be useful to you, then absolutely feel free to send in a PR.

A few quick notes from looking at your implementation:

  • We'd probably want to offset the labels to the side so they don't overlap with the chart.
  • Since calling layout() on a TextPainter is expensive, we wouldn't want to do that on every build of the CustomPaint: it would be better to initialize and layout the labels in the main widget, and pass them in to the painter which calls paint() on them.

from flutter_sparkline.

trentpiercy avatar trentpiercy commented on August 20, 2024

Thanks so much for the feedback. Just started with flutter so could you help me understand how I would initialize and layout the labels in the main widget without knowing the height of the canvas. The idea makes sense and I see how it would be less expensive I just don't know how I would do it without some of the variables that are inside the paint(Canvas canvas, Size size) function as the labels' location depends on them.

from flutter_sparkline.

xqwzts avatar xqwzts commented on August 20, 2024

You'd still call textPainter.paint() in the CustomPainter, you'd just remove the textPainter.layout and new TextPainter() calls to somewhere out of the build/paint methods so the painter gets created once and cached.

So from your example:

This can all be extracted as it doesn't rely on any paint-time information:

 TextPainter textPainter = new TextPainter(
          text: new TextSpan(
              text: "\$" + numCommaParse(_maxVolume),
              style: new TextStyle(
                  color: gridLineLabelColor,
                  fontSize: 10.0,
                  fontWeight: FontWeight.bold)),
          textDirection: TextDirection.ltr);
      textPainter.layout();

This gets called in paint() with the rest of the elements being drawn:

textPainter.paint(canvas, new Offset(0.0, gridLineY + 2.0));

I've done something similar in my circular chart widget:
I build the TextPainter here - and then paint it here.

Hope that helps.

from flutter_sparkline.

trentpiercy avatar trentpiercy commented on August 20, 2024

Right it's just that gridLineText depends on height and gridLineY which both depend on the canvas sizing so I don't think I would be able to build them outside the CustomPainter with the way my code currently works. I'm sure it would be possible though, just might have to rethink a bit of it.

gridLineValue = _max - ((_max - _min) * (gridLineY / height));
        String gridLineText = gridLineValue.toString()[4] != "."
            ? gridLineValue.toString().substring(0, 5)
            : gridLineValue.toString().substring(0, 4);
        TextPainter textPainter = new TextPainter(
            text: new TextSpan(
                text: "\$" + gridLineText,
                style: new TextStyle(
                    color: gridLineLabelColor,
                    fontSize: 10.0,
                    fontWeight: FontWeight.bold)),
            textDirection: TextDirection.ltr);
        textPainter.layout();
        textPainter.paint(canvas, new Offset(width - 32.0, gridLineY - 13.0));

from flutter_sparkline.

xqwzts avatar xqwzts commented on August 20, 2024

I feel like gridLineValue doesn't really need to depend on gridLineY and height though, we already know our max and min values, and we know how many lines we want to display, it should be fine to calculate the value externally [for the label's text string] then use the scaling logic we have in place in order to know where to paint them.

from flutter_sparkline.

trentpiercy avatar trentpiercy commented on August 20, 2024

I think I figured it out. It only makes the makes the TextPainters and and calls layout on them when the entire widget is rebuilt.

Is this how it should be done?

Thanks so much for helping me out btw. Just curious, how did you learn everything you know about flutter?

from flutter_sparkline.

xqwzts avatar xqwzts commented on August 20, 2024

Looks great!

Quick nit:
You're looping on your data twice here, you can just combine this with the previous loop:

for (var i in data) {
      if (i["volumeto"] > _maxVolume) {
        _maxVolume = i["volumeto"].toDouble();
      }
}

There's also max() and min() methods in dart:math, though I'm not sure how convenient it would be for you to use there.

If you decide to have updateable data in the future [to make your graph animated for example] - then you'll need to extract your update logic into the main OHLCVGraph widget [and make it a StatefulWidget instead of a StatelessWidget so it can hold and update the gridLineTextPainters].

Thanks so much for helping me out btw. Just curious, how did you learn everything you know about flutter?

I'm happy to help, glad it worked out :D.

I've been using flutter for some months now, so it's mostly added knowledge by trial and error, reading through the source code [dig through the framework and engine code some time, they're really well organized and excellently documented], and trying to read through the flutter github issues/PRs every now and then.

If you aren't already there, consider joining the main flutter gitter channel: there's a lot of 'passive' knowledge you can gain just by seeing the same questions and answers over and over :)

from flutter_sparkline.

xqwzts avatar xqwzts commented on August 20, 2024

And for Animation/CustomPainter stuff in Flutter this is an excellent article: https://medium.com/flutter-io/zero-to-one-with-flutter-43b13fd7b354

from flutter_sparkline.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.