Skip to content

Commit

Permalink
Creator tools ref chart (#220)
Browse files Browse the repository at this point in the history 
New creator tools referrers chart. Moving from circle graph to a bar chart using the ConstraintLayout.
  • Loading branch information
@eoji
eoji committed Mar 9, 2018
1 parent 8efc3bb commit 338238f
Show file tree
Hide file tree
Showing 13 changed files with 323 additions and 310 deletions.
4 changes: 4 additions & 0 deletions app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@ android {

repositories {
jcenter()
maven {
url 'https://maven.google.com'
}
}

dependencies {
Expand Down Expand Up @@ -170,6 +173,7 @@ dependencies {
compile 'net.hockeyapp.android:HockeySDK:3.6.1'
compile 'org.jsoup:jsoup:1.8.2'
compile "com.mixpanel.android:mixpanel-android:4.6.4"
compile 'com.android.support.constraint:constraint-layout:1.0.2'

// Testing
testCompile 'junit:junit:4.12'
Expand Down
95 changes: 65 additions & 30 deletions ...main/java/com/kickstarter/ui/viewholders/CreatorDashboardReferrerBreakdownViewHolder.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,22 @@

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.support.constraint.ConstraintLayout;
import android.util.Pair;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.kickstarter.R;
import com.kickstarter.libs.KSCurrency;
import com.kickstarter.libs.utils.ViewUtils;
import com.kickstarter.models.Project;
import com.kickstarter.services.apiresponses.ProjectStatsEnvelope;
import com.kickstarter.ui.views.ReferrerBreakdownView;
import com.kickstarter.viewmodels.CreatorDashboardReferrerBreakdownHolderViewModel;

import java.math.RoundingMode;

import butterknife.Bind;
import butterknife.BindDimen;
import butterknife.ButterKnife;

import static com.kickstarter.libs.rx.transformers.Transformers.observeForUI;
Expand All @@ -31,17 +29,22 @@ public class CreatorDashboardReferrerBreakdownViewHolder extends KSViewHolder {
protected @Bind(R.id.amount_pledged_via_kickstarter_text_view) TextView amountPledgedViaInternalTextView;
protected @Bind(R.id.amount_pledged_via_external_text_view) TextView amountPledgedViaExternalTextView;
protected @Bind(R.id.amount_pledged_via_custom_text_view) TextView amountPledgedViaCustomTextView;
protected @Bind(R.id.percent_via_custom_circle_text_view) ImageView percentCustomCircleTextView;
protected @Bind(R.id.percent_via_custom_text_view) TextView percentCustomTextView;
protected @Bind(R.id.percent_via_external_text_view) TextView percentExternalTextView;
protected @Bind(R.id.percent_via_external_circle_text_view) ImageView percentExternalCircleTextView;
protected @Bind(R.id.percent_via_kickstarter_text_view) TextView percentInternalTextView;
protected @Bind(R.id.percent_via_kickstarter_circle_text_view) ImageView percentInternalCircleTextView;
protected @Bind(R.id.pledged_via_custom_layout) LinearLayout pledgedViaCustomLayout;
protected @Bind(R.id.pledged_via_external_layout) LinearLayout pledgedViaExternalLayout;
protected @Bind(R.id.pledged_via_kickstarter_layout) LinearLayout pledgedViaInternalLayout;
protected @Bind(R.id.referrer_breakdown_chart_layout) LinearLayout referrerBreakdownLayout;
protected @Bind(R.id.referrer_breakdown_view) ReferrerBreakdownView referrerBreakdownView;
protected @Bind(R.id.pledged_via_custom) View pledgedViaCustomLayout;
protected @Bind(R.id.pledged_via_custom_bar) View pledgedViaCustomBar;
protected @Bind(R.id.pledged_via_custom_indicator) View pledgedViaCustomIndicator;
protected @Bind(R.id.pledged_via_external) View pledgedViaExternalLayout;
protected @Bind(R.id.pledged_via_external_bar) View pledgedViaExternalBar;
protected @Bind(R.id.pledged_via_external_indicator) View pledgedViaExternalIndicator;
protected @Bind(R.id.pledged_via_kickstarter_bar) View pledgedViaKickstarterBar;
protected @Bind(R.id.pledged_via_kickstarter_indicator) View pledgedViaKickstarterIndicator;
protected @Bind(R.id.pledged_via_kickstarter) View pledgedViaKickstarterLayout;
protected @Bind(R.id.referrer_breakdown_chart_layout) ConstraintLayout referrerBreakdownLayout;

protected @BindDimen(R.dimen.grid_1) int grid1Pixels;
protected @BindDimen(R.dimen.grid_3) int grid3Pixels;

private KSCurrency ksCurrency;

Expand All @@ -52,45 +55,35 @@ public CreatorDashboardReferrerBreakdownViewHolder(final @NonNull View view) {

this.viewModel = new CreatorDashboardReferrerBreakdownHolderViewModel.ViewModel(environment());

this.viewModel.outputs.customReferrerColor()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(color -> DrawableCompat.setTint(this.percentCustomCircleTextView.getDrawable(), color));

this.viewModel.outputs.customReferrerPercent()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(percent -> this.referrerBreakdownView.setCustomAngleAndColor(percent * 360d));
.subscribe(percent -> setReferrerWidth(percent, this.pledgedViaCustomBar, this.pledgedViaCustomIndicator));

this.viewModel.outputs.customReferrerPercentText()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(this.percentCustomTextView::setText);

this.viewModel.outputs.externalReferrerColor()
this.viewModel.outputs.externalReferrerPercent()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(color -> DrawableCompat.setTint(this.percentExternalCircleTextView.getDrawable(), color));
.subscribe(percent -> setReferrerWidth(percent, this.pledgedViaExternalBar, this.pledgedViaExternalIndicator));

this.viewModel.outputs.externalReferrerPercent()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(percent -> this.referrerBreakdownView.setExternalAngleAndColor(percent * 360d));
.subscribe(__ -> flipIndicatorIfStatsOffScreen(this.pledgedViaExternalIndicator, this.pledgedViaExternalLayout));

this.viewModel.outputs.externalReferrerPercentText()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(this.percentExternalTextView::setText);

this.viewModel.outputs.internalReferrerColor()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(color -> DrawableCompat.setTint(this.percentInternalCircleTextView.getDrawable(), color));

this.viewModel.outputs.internalReferrerPercent()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(percent -> this.referrerBreakdownView.setInternalAngleAndColor(percent * 360d));
.subscribe(percent -> setReferrerWidth(percent, this.pledgedViaKickstarterBar, this.pledgedViaKickstarterIndicator));

this.viewModel.outputs.internalReferrerPercentText()
.compose(bindToLifecycle())
Expand All @@ -100,17 +93,17 @@ public CreatorDashboardReferrerBreakdownViewHolder(final @NonNull View view) {
this.viewModel.outputs.pledgedViaCustomLayoutIsGone()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(ViewUtils.setGone(this.pledgedViaCustomLayout));
.subscribe(gone -> this.hideReferrer(gone, this.pledgedViaCustomLayout, this.pledgedViaCustomBar, this.pledgedViaCustomIndicator));

this.viewModel.outputs.pledgedViaExternalLayoutIsGone()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(ViewUtils.setGone(this.pledgedViaExternalLayout));
.subscribe(gone -> this.hideReferrer(gone, this.pledgedViaExternalLayout, this.pledgedViaExternalBar, this.pledgedViaExternalIndicator));

this.viewModel.outputs.pledgedViaInternalLayoutIsGone()
.compose(bindToLifecycle())
.compose(observeForUI())
.subscribe(ViewUtils.setGone(this.pledgedViaInternalLayout));
.subscribe(gone -> this.hideReferrer(gone, this.pledgedViaKickstarterLayout, this.pledgedViaKickstarterBar, this.pledgedViaKickstarterIndicator));

this.viewModel.outputs.projectAndCustomReferrerPledgedAmount()
.compose(bindToLifecycle())
Expand All @@ -128,6 +121,48 @@ public CreatorDashboardReferrerBreakdownViewHolder(final @NonNull View view) {
.subscribe(pa -> this.setAmountPledgedTextViewText(pa, this.amountPledgedViaInternalTextView));
}

private void setReferrerWidth(final Float percent, final View bar, final View indicator) {
final ConstraintLayout.LayoutParams barLayoutParams = (ConstraintLayout.LayoutParams) bar.getLayoutParams();
barLayoutParams.horizontalWeight = percent;
bar.setLayoutParams(barLayoutParams);

adjustIndicatorMarginForShortBar(bar, indicator);
}

private void adjustIndicatorMarginForShortBar(final View bar, final View indicator) {
bar.post(() -> {
if (bar.getMeasuredWidth() < this.grid3Pixels) {
final ConstraintLayout.LayoutParams indicatorLayoutParams = (ConstraintLayout.LayoutParams) indicator.getLayoutParams();
indicatorLayoutParams.startToStart = bar.getId();
indicatorLayoutParams.endToEnd = bar.getId();
indicator.setLayoutParams(indicatorLayoutParams);
}
});
}

private void flipIndicatorIfStatsOffScreen(final View indicator, final View stats) {
stats.post(() -> {
if (stats.getLeft() < this.referrerBreakdownLayout.getLeft()) {
indicator.setScaleX(-1);
final ConstraintLayout.LayoutParams indicatorLayoutParams = (ConstraintLayout.LayoutParams) indicator.getLayoutParams();
indicatorLayoutParams.setMarginStart(this.grid3Pixels);
indicator.setLayoutParams(indicatorLayoutParams);

final ConstraintLayout.LayoutParams statsLayoutParams = (ConstraintLayout.LayoutParams) stats.getLayoutParams();
statsLayoutParams.startToEnd = indicator.getId();
statsLayoutParams.setMarginStart(this.grid1Pixels);
statsLayoutParams.endToStart = ConstraintLayout.LayoutParams.UNSET;
stats.setLayoutParams(statsLayoutParams);
}
});
}

private void hideReferrer(final boolean gone, final @NonNull View layout, final @NonNull View bar, final @NonNull View indicator) {
ViewUtils.setGone(layout, gone);
ViewUtils.setGone(bar, gone);
ViewUtils.setGone(indicator, gone);
}

@Override
public void bindData(final @Nullable Object data) throws Exception {
final Pair<Project, ProjectStatsEnvelope> projectAndStats = requireNonNull((Pair<Project, ProjectStatsEnvelope>) data);
Expand Down
76 changes: 0 additions & 76 deletions app/src/main/java/com/kickstarter/ui/views/ReferrerBreakdownView.java
View file

This file was deleted.

Loading

0 comments on commit 338238f

Please sign in to comment.