Creator tools ref chart

app/build.gradle

@@ -128,6 +128,9 @@ android {
 
 repositories {
     jcenter()
+    maven {
+        url 'https://maven.google.com'
+    }
 }
 
 dependencies {
@@ -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'

app/src/main/java/com/kickstarter/ui/viewholders/CreatorDashboardReferrerBreakdownViewHolder.java

@@ -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;
@@ -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;
 
@@ -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())
@@ -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())
@@ -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);